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这 本 书 反映 了 Web 技 术 的 革命 。 之 前 ， 人 们 普遍 认为 Web 无 须 编 
程 ， 只 要 把 脚本 人 硬 罕 入 网 页 之 中 就 行 了 。 现 在 ，HTML 和 JavaScript 在 实 
现 良 好 用 户 体验 的 过 程 中 产生 了 重要 作用 。 通 过 阅读 本 书 ， 你 将 会 掌握 
Web 发 展 进程 中 最 前 沿 的 技术 。 


本 书 主 要 内 容 
本 书 履 六 的 内 容 如 下 : 
第 1 章 Web 应 用 平台 


介绍 在 新 的 HTML 5 平台 编程 的 原因 ， 以 及 新 平台 为 JavaScript 编 程 
人 员 提 供 的 便利 。 


第 2 章 ” JavaScript 的 力量 





介绍 JavaScript 中 很 强大 但 是 你 可 能 并 不 知道 的 功能 ， 以 及 为 什么 你 
需要 使 用 这 些 功 能 去 探索 本 书 涵盖 的 HTML 5 的 新 特性 以 及 相关 库 。 


第 3 章 ”测试 JavaScript 应 用 





展示 由 JavaScript 和 浏览 器 提供 的 特定 环境 中 测试 程序 的 方法 。 
第 4 章 ”本 地 存储 


描述 使 用 localStorage 和 sessionStorage 对 象 缓存 在 浏览 器 中 的 简单 数 
据 。 


第 5 章 ”IndexedDB 





展示 支持 本 地 存储 的 更 强大 的 NoSQL 数 据 库 。 


Hom ”文件 
描述 从 用 户 系 统 中 读 取 和 上 传 文件 的 方法 。 
第 7 章 ”离线 处 理 


描述 让 用 户 在 设备 不 能 联网 的 情况 下 使 用 你 开发 的 应 用 程序 所 要 做 
的 操作 。 


第 8 章 ， 把 工作 分 割 成 Web Worker 
展示 HTML 5 和 JavaScript 的 多 线程 能 
第 9 章 Web Socket 


演示 如 何 通 过 使 用 Web Socket 提 高 浏览 大 端 和 服务 器 端的 数据 传输 


第 10 章 ”新 标记 





忆 结 HTML 5 引入 的 对 Web 开 发 人 员 最 为 有 用 的 新 标记 。 
附录 A 需要 了 解 的 JavaScript 工 具 


描述 本 书 中 用 到 的 以 及 其 他 可 以 让 编程 更 快 更 准确 的 工具 。 


排版 约定 


本 书 采 用 了 以 下 排版 约定 
斜体 (Italic) 
表示 新 术语 、 


网 址 、 电 子 邮 件 地 址 、 文 件 名 和 文件 扩展 名 
等 宽 字 体 (Constant width) 


用 于 表示 代码 清单 以 及 正文 中 引用 的 代码 元 素 ， 如 变量 或 函数 名 
称 、 声 明和 关键 词 。 


ARA CConstant width italic) 
表示 需要 由 用 户 提 供 值 或 由 上 下 文 决 定 的 值 来 替换 的 文本 


表示 提示 、 建 议 或 者 一 般 性 注释 


代码 示例 的 使 用 


本 书 旨 在 帮助 你 完成 你 的 工作 。 一 般 来 说 ， 可 以 在 程序 和 文档 中 使 
用 本 书 的 代码 。 如 果 你 复制 了 代码 的 关键 部 分 ， 那 么 你 需要 联系 我 们 获 
得 许可 。 例 如 ， 利 用 本 书 的 几 段 代码 编写 程序 是 不 需要 许可 的 。 售 卖 或 
出 版 O'Reilly 书 中 示例 的 CD-ROM 需 要 我 们 的 许可 。 引 用 本 书 回答 问题 
以 及 引用 示例 代码 不 需要 我 们 的 许可 。 将 本 书 的 大 量 示 例 代 码 用 于 你 的 
产品 文档 中 需要 许可 。 
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HTML 5 Applications by Zachary Kessin (O'Reilly) .Copyright 2012 
Zachary Kessin, 978-1-4493-39908-5". 


如 果 你 认为 对 代码 示例 的 使 用 已 经 超出 以 上 的 许可 范围 ， 我 们 很 欢 
迎 你 通过 permissions@oreilly.com 联 系 我 们 。 
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奥 菜 利 技术 咨询 《北京 ) 有 限 公 司 
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http://shop.oreilly.com/product/0636920015116.do 
技术 问题 或 评论 本 书 ， 请 发 送 邮件 至 : 
bookquestions@oreilly.com 
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第 1 草 Web 应 用 平台 


HTML 5 可 以 将 Web 打 造成 创建 真正 应 用 程序 的 一 流 环境 。HTML 5 
提供 了 对 浏览 器 API 的 一 系列 关键 扩展 ， 以 此 加 强 了 JavaScript 现 有 的 工 
具 集 ， 这 些 扩 展 使 开发 人 员 更 简便 地 创建 自我 完善 的 应 用 ， 而 非 现 在 的 
这 种 仅仅 显示 远程 服务 器 进程 的 界面 。 





Web 最 初 是 一 种 分 享 存储 在 web 服务 器 上 文件 的 方法 ， 这 些 文件 只 
是 偶尔 变化 。 开 发 人 员 很 快 想 出 了 如 何 实时 生成 那些 文件 ， 从 而 向 构建 
应 用 程序 迈 出 了 第 一 大 步 。 下 一 大 步 是 向 浏览 器 客户 端 中 添加 交互 性 。 
随 着 “浏览 器 大 战 ” 的 肆虐 和 之 后 突然 停止 ，JavaScript 和 文档 对 象 模型 
(DOM) 开始 让 开发 人 员 能 够 创建 动态 HTML。 几 年 后 ，Ajax 将 这 些 技 
术 用 于 样式 中 。Ajax 增 加 了 一 些 工 具 ， 使 页 面 与 服务 器 以 更 小 的 单元 进 


行 通信 。 


HTML 5 建立 在 这 20 年 的 发 展 之 上 ， 填补 了 一 些 重 要 的 空白 。 从 表 
面 上 看 ， 许 多 HTML 5 的 变化 是 增加 了 对 以 前 需要 用 插件 实现 的 功能 
(尤其 是 多 媒体 和 图 像 ， 的 支持 ， 实 际 上 ， 它 为 JavaScript 程 序 员 提供 了 
一 些 独 立 〈 或 者 至 少 更 松散 合作 ) 创建 应 用 程序 的 工具 ， 有 了 这 些 工具 
他 们 可 以 用 HTML 搭 建 架 构 、 用 CSS 制 作 界 面 、 用 JavaScript 表 达 人 逻辑 和 
行为 。 


为 Web 应 用 增加 力量 


HTML 5 提高 了 Web 应 用 的 标准 。 尽 管 它 仍然 需要 工作 在 安全 约束 








条 件 下 ， 但 最 终 会 提供 桌面 开 及 人 员 已 经 期 盼 多 年 的 工具 : 


本 地 存储 
引用 键 - 值 系统 多 达 5MB 的 数据 。 


数据 库 
起 初 是 一 个 基于 SQLite 的 API， 形 势 似乎 已 经 转向 
IndexedDB,IndexedDB 是 一 种 JavaScript 原 生 的 NoSQL 系 统 。 


文件 
尽管 出 于 安全 的 原因 Web 应 用 依旧 不 能 自由 地 访问 文件 系统 ， 但 是 
己 经 能 够 使 用 用 户 指定 的 文件 ， 并 开始 创建 文件 了 。 


离线 操作 
当 笔 记 本 电脑 或 手机 在 “飞行 模式 ?时 ，Web 应 用 无 法 与 服务 串通 
清单 (Manifest) 文件 通过 缓存 文件 到 本 地 帮助 开 及 人 员 实 现 离线 


Web Worker 





线程 和 子 进程 一 直 是 个 问题 ， 但 是 JavaScript 根 本 不 提供 这 些 。Web 
Worker 提 供 了 一 种 方法 ， 将 应 用 进程 放 到 独立 空间 中 ， 在 那里 它们 可 以 
互 不 干扰 地 工作 。 


Web Socket 


尽管 超 文本 传输 协议 CHTTP) 随 独 时 间 的 推移 有 一 些 更 新 ， 但 它 
一 直 是 Web 的 基础 。Web Socket 将 “请 求 / 啊 应 ”的 通信 方式 转化 成 创建 更 
灵活 的 通信 系统 。 


当然 ， 还 有 更 多 工具 ， 从 地 理 信息 、 音 频 和 视频 、 画 布 图 形 到 各 种 
小 的 新 标记 ， 这 些 工 具 为 在 HTML 5 上 构建 工业 级 的 应 用 提供 了 基础 。 


开发 网 络 应 用 程序 





过 去 ， 复 杂 的 Web 应 用 程序 只 不 过 是 一 个 目录 、 一 个 从 数据 库 派 生 
的 静态 页 面 或 者 一 个 JavaScript 生 成 的 计算 器 ， 没 有 人 梦想 用 JavaScript 
做 复杂 的 应 用 程序 。 复 杂 的 应 用 程序 需要 用 Java、C 或 Ct++ 写 的 专门 的 
客户 端 /服务 器 应 用 程序 。 事 实 上 ， 在 DOM 和 Ajax 出 现 前 想 要 用 
JavaScript 这 样 做 几乎 是 不 可 能 的 。 然 而 ，Ajax 引 入 了 不 需要 重新 加 载 页 
面 即 可 与 服务 器 通信 的 功能 ， 而 且 DOM 人 允许 程序 员 即 时 改变 HTML。 





2007 年 Google 引 入 了 Gears， 这 是 一 个 浏览 器 扩展 ， 它 带 给 开发 人 
员 前 所 未 有 的 力量 。Gears 允 许 浏览 器 离线 工作 ， 可 以 让 用 户 在 浏览 器 
中 存储 更 多 数据 ， 并 设计 了 一 个 工作 池 (Worker pool) 用 于 处 理 长 时 间 
运行 的 任务 。Gears 已 经 停 用 ， 但 是 它 的 大 多 数 功 能 经 过 修改 后 已 移植 
到 HTML 5 中 。 


现代 Web 看 起 来 像 一 个 全 方位 的 网 站 ， 包 含 各 种 内 容 ， 从 维基 百科 
那样 依旧 有 效 的 旧式 文档 集合 ， 到 Facebook、YouTube 和 eBay 这 种 提供 
与 他 人 交互 的 网 站 ， 再 到 可 以 称 为 蔡 代 桌面 应 用 程序 的 东西 〈 例 如 
Gmail 和 Google Docs) 。 许 多 以 前 独立 的 应 用 程序 ， 例 如 邮件 客户 端 ， 
已 经 变 成 了 Web 体 验 中 不 可 分 割 的 一 部 分 。 在 现代 Web 中 ， 应 用 程序 和 
页 面 间 的 界线 已 经 非常 模糊 ， 只 在 网 站 的 用 途上 有 所 区 别 。 





在 浏览 喜 中 运行 应 用 程序 对 于 用 户 和 开 及 人 员 都 有 很 大 的 优势 。 对 
用 户 来 说 ， 使 用 Web 应 用 没有 负担 : 用 户 可 以 试用 应 用 程序 ， 如 果 不 喜 
欢 束 换个 页 面 而 不 会 在 人 硬盘 上 留 下 任何 东西 。 演 试 新 的 应 用 也 相当 安 
全 ， 因 为 它们 运行 在 一 个 沙 箱 环 境 中 。 当 开发 人 员 更 新 代码 时 ， 新 版 本 
的 应 用 程序 会 自动 下 载 到 浏览 器 。Web 应 用 程序 很 少 有 版 本 号 ， 至 少 已 
公开 的 应 用 程序 是 这 样 的 。 





对 开发 人 员 来 说 ， 在 浏览 需 中 运行 应 用 程序 优势 更 大 。 首 先 ， 对 用 
己 来 说 的 优势 对 开发 人 员 也 是 优势 。 其 次 ， 开 发 人 员 不 需要 写 安装 程 
序 ， 而 且 新 版 本 可 以 上 自动 发 送 给 用 户 ， 使 得 小 量 的 更 新 切实 可 行 。 男 
外 ， 还 有 其 他 好 处 。 





Web 是 跨 平 台 的 ， 开 发 人 员 都 希望 开发 的 应 用 能 运行 在 多 个 系统 
上 ， 例 如 Windows XP. Windows Vista, Windows 7. Mac OS X, 
Linux、iPhone/iPad 和 Android， 这 个 愿景 如 果 用 传统 的 开发 工具 来 实现 
将 是 一 项 非常 艰巨 的 任务 ， 但 是 用 Web 和 一 些 具有 前 瞻 性 的 技术 来 实 
现 ， 就 会 变 得 十 分 简单 。 一 个 用 标准 类 库 〈 例 如 jQuery) 建立 的 网 络 应 
用 能 运行 在 上 述 所 有 这 些 和 其 他 几 个 平台 的 多 数 浏 览 器 上 。Sun 公 司 一 
度 和 希望 Java applets 将 Web 定 义 为 一 个 平台 ， 现 在 JavaScript 已 成 为 默认 的 
Web 平 台 。 


你 其 至 可 以 在 移动 设备 上 运行 Web 应 用 ， 人 至 少 现在 可 以 在 智能 手机 
上 运行 。 你 可 以 用 一 个 包装 (例如 PhoneGap〉 来 创建 一 个 HTML 5 应 


用 ， 并 把 它 打 包 ， 在 App Store. Android Market 和 其 他 网 站 上 出 售 。 你 
可 以 创建 一 个 与 Web 服 务 器 大 量 交 互 或 者 完全 独立 的 应 用 ， 两 者 此 可 











HTML 5 之 前 的 Web 真 正 的 不 足 之 处 在 于 ， 一 个 运行 在 计算 机 上 的 
Web 应 用 要 占用 上 千 兆 字 节 内 存 和 磁盘 空间 ， 运 行 起 来 像 在 老式 vt320 终 
端 上 一 样 慢 。 所 有 数据 存储 必须 在 服务 器 上 完成 ， 所 有 文件 必须 从 服务 
器 加 载 ， 每 一 个 交互 必须 完成 一 次 与 服务 器 间 的 往返 。 这 会 使 用 户 感觉 
较 慢 ， 特 别 是 当 用 户 距离 服务 器 很 远 时 。 如 果 用 户 查 看 页 面 每 次 要 耐心 
等 待 至 少 400ms， 用 户 就 会 感觉 应 用 程序 运行 很 慢 。 从 我 在 特拉维夫 的 
办 公 室 到 加 利 福 尼 亚 的 一 个 服务 器 ，ICMP ping 的 一 次 往返 时 间 约 为 
250ms。 到 服务 器 上 的 任何 操作 都 将 耗费 额外 的 时 间 ， 使 应 用 运行 慢 下 
来 。 当 然 ， 移 动 设备 通信 更 慢 。 

















JavaScript 的 胜利 


管 JavaScript 自 1995 年 出 现 以 来 已 经 成 为 Web 开 发 的 关键 组 成 部 
分 ， 但 是 这 十 几 年 来 它 一 直 背 负 着 坏 名 声 : 语法 古怪 、 性 能 低下 、 产 生 
奇怪 的 错误 ， 以 及 对 DOM (Document Object Model， 文 档 对 象 模型 ) 
的 依赖 。 尽 管 浏览 器 已 经 将 其 封闭 在 “ 沙 箱 ?中 ， 简 化 了 用 户 的 安全 问 
题 ， 但 是 要 为 JavaScript 开 发 人 员 提 供 一 些 在 传统 桌面 应 用 开发 中 显得 微 
不 足 道 的 功能 却 很 难 。 





脚本 文化 造就 了 它 目 身 的 问题 。 提 供 非常 低 的 进入 门槛 是 件 好 事 ， 
但 是 需要 付出 代价 。 代 价 之 一 就 是 ， 这 样 一 种 语言 往往 允许 没有 经 验 的 
程序 员 做 一 些 非 常 不 明智 的 事情 。 起 初 ， 程 序 员 可 以 很 容易 地 从 Web 上 
找到 JavaScript 例 子 ， 剪 切 、 粘 贴 或 做 一 些 修 改 ， 就 能 得 到 大 多 数 可 用 的 
东西 。 遗 憾 的 是 ， 随 着 时 间 的 推移 对 这 些 代 人 码 的 维护 变 得 越 来 越 困 难 。 








随 着 Ajax 的 流行 ， 开 发 人 员 对 JavaScript 有 了 新 的 看 法 。 一 些 开发 者 
致力 于 对 解释 和 运行 JavaScript 代 码 的 引擎 进行 改进 ， 致 使 运行 速度 大 幅 
度 提升 。 还 有 一 些 开 发 者 则 致力 于 语言 本 身 ， 他 们 意识 到 JavaScript 有 一 
些 很 不 错 的 功能 ， 能 够 开发 最 好 的 应 用 ， 正 如 Douglas Crockford 的 

《JavaScript 语 言 精粹 》 (JavaScript: The Good Parts,O'Reilly 2008 出 
版 ) 中 所 讲述 的 一 样 。 


除了 核心 语言 之 外 ， 开 发 人 员 还 创建 了 一 些 工 具 使 JavaScript 更 易于 
调试 。 尽 管 Venkman 〈 一 款 早 期 的 调试 器 ) 在 1998 年 就 出 现 了 ， 但 是 
2006 年 发 布 的 Firebug 成 了 JavaScript 调 试 器 的 黄金 标准 。 它 允许 开发 人 
员 对 Ajax 调用 进行 跟踪 ， 查 看 DOM 和 CSS 的 状态 ， 并 单 步 执行 代码 等 。 
基于 WebKit 的 浏览 器 提供 了 类 似 的 内 置 功能 ， 尤 其 是 苹果 公司 的 Safari 
和 GoogleChrome,Opera Dragonfly 则 对 Opera 提 供 支持 。 甚 至 ， 在 移动 设 
备 封闭 空间 中 工作 的 开发 人 员 现在 也 能 用 Weinre (Web Inspector 
Remote: 远程 Web 调 试 器 〉 像 Firebug 一 样 进行 调试 。 


类 库 是 JavaScript 最 近 大 规模 投入 的 最 终 关 键 组 成 部 分 。 开 发 人 员 可 
能 依旧 不 能 理解 他 们 使 用 的 全 部 代码 ， 但 是 能 够 将 代码 组 织 得 更 易于 升 
级 ， 有 时 甚至 可 以 用 可 互 换 的 类 库 简 化 代码 管理 。 





jQuery 


如 果 有 一 个 类 库 可 以 称 为 JavaScript 类 库 的 “黄金 标准 "的话 ， 那 一 定 
是 John Resig 的 jQuery 类 库 。jQuery 围 绕 DOM 和 其 他 JavaScript 对 象 〈 如 
XMLHttpRequest 对 象 ) 形 成 了 一 个 包装 器 ， 使 得 用 JavaScript 实 现 各 种 
功能 更 轻松 、 更 有 趣 。 从 许多 方面 讲 ，jQuery 都 是 每 个 JavaScript 程 序 员 
应 该 熟知 、 必 不 可 少 的 类 库 。 学 习 j}Query 请 访问 网 站 http://jquery.org， 
或 者 阅读 由 O'Reilly 出 版 的 大 量 优秀 图 书 ， 例 如 《深入 浅 出 jQuery》 
(Head First jQuery) 或 者 《jQuery 锦 圳 妙计》 (jQuery Cookbook) > Æ 
书 中 的 许多 示例 都 是 用 jQuery 编写 的 。 





ExtJS 


鉴于 jQuery 形成 了 一 个 DOM 包 装 器 ExtJS， 因 此 人 们 从 
Sencha Chttp://sencha.com) 开始 设法 尽 可 能 地 把 它 从 中 和 剥离 。ExtJS 以 
丰富 的 widget 控件 集 为 特点 ， 可 以 在 任意 web 页面 上 执行 ， 并 提供 了 许 
多 桌面 开发 人 员 所 熟悉 的 widget 控 件 ， 如 树 、 网 格 、 标 单 、 按 钮 等 。 整 

个 系统 经 过 深思 熟 虑 并 良好 地 组 织 在 一 起 ， 使 许多 应 用 的 开发 成 为 一 种 

享受 。 虽 然 ExtJS 的 库 往 往 都 很 大 ， 但 是 它 非常 适合 一 些 应 用 开发 。 
ExtJS 有 一 个 不 错 的 功能 ， 即 它 的 许多 对 象 都 知道 如 何 保存 自身 的 状 

。 因 此 ， 如 果 用 户 有 一 个 表格 ， 并 当 再 次 浏览 该 表格 时 对 它 的 列 进行 
了 重新 整理 ， 那 么 可 以 设置 它 来 保存 这 个 状态 。 第 4 章 中 的 “在 ExtJS 中 
使 用 localStorage” 讲 述 了 如 何 利 用 本 地 存储 加 强 这 一 功能 


Google Web 人 套件 及 其 他 


一 些 工 具 如 GWT 人 允许 程序 员 编 写 Java 人 代码， 然后 编译 成 
JavaScript， 这 样 束 可 以 在 浏览 器 中 运行 了 。 


第 2 章 “ JavaScript 的 力量 


JavaScript 语 言 编 程 并 不 难 ， 但 是 要 达到 真正 的 JavaScript 专 家 级 水 
平 非常 有 挑战 性 。 成 为 熟练 的 JavaScript 程 序 员 有 几 个 关键 因素 。 本 章 中 
的 技术 将 反复 出 现在 本 书 剩余 部 分 所 介绍 的 类 库 和 编程 实践 中 ， 因 此 在 


继续 介绍 其 他 章节 前 需要 先 熟 匡 这 些 技 术 。 








附录 中 列 出 了 一 些 优秀 的 JavaScript 编 程 工具 。 这 些 工 具 可 以 提供 大 
量 的 帮助 。 例 如 ，JSLint 〈 见 附录 : JSLint) 能 捕获 一 些 程序 员 可 能 会 
漏 掉 的 错误 。 一 些 网 站 是 这 类 编程 工具 的 很 好 来 源 ， 如 StackOverflow 和 














O'Reilly Answers 。 


本 章 并 非 要 完整 地 介绍 JavaScript 的 力量 。 有 关内 容 可 参阅 下 列 


JavaScript P $$: 





.《JavaScript 语 言 精粹 》 (JavaScript, The Good Parts) , Douglas 


Crockford 


- (JavaScript 18 EH) — (JavaScript: The Definitive Guide) , 


David Flanagan 


《高 性 能 JavaScript 编 程 》 (High Performance JavaScript) ， 


Nicholas C.Zakas 


.《JavaScript 模 式 》 (JavaScript Patterns) , Stoyan Stefanov 


非 阻 塞 JO 和 回调 


撤 开 语言 本 身 不 谈 ， 学 习 JavaScript 的 首要 关键 是 理解 事件 驱动 编 
程 。JavaScript 运 行 环境 中 的 操作 往往 是 异步 操作 ， 这 就 是 说 先 在 某 个 地 
方 创建 操作 ， 当 一 些 外 部 事件 发 生 后 再 执行 。 





这 样 可 以 说 明 传统 语言 中 1/O 方 面 发 生 的 主要 变化 。 例 2-1 是 一 个 典 
型 的 传统 语言 TO 示例 ， 本 例 使 用 PHP 语 言 。$db->getAll ($query) ; 
这 一 行 要 求 数据 库 访问 硬盘 ， 因 此 它 花 费 的 运行 时 间 将 比 函数 中 的 其 他 
部 分 多 很 多 。 当 程序 等 待 服务 器 执行 时 ， 碍 询 语句 被 阻塞 ， 程 序 什么 都 
不 做 。 通 常 ， 这 在 服务 器 端 语言 中 〈 如 PHP) 不 成 问题 ， 因 为 可 以 有 很 
多 并 行 执行 的 线程 或 进程 。 


例 2-1: PHP 中 的 阻塞 IO 








function getFromDatabase() 

{ 

Sdb=getDatabase(); 

Squery="SELECT name FROM countries"; 
Sresult=Sdb->getAll ($query); 
returnSresult; 


} 


























然而 ，JavaScript 中 仅 有 一 个 执行 线程 ， 因 此 ， 如 果 函 数 被 阻塞 就 什 
么 都 不 做 了 ， 那 么 用 户 界面 也 会 冻结 。 因 此 ，JavaScript 必 须 找到 一 个 不 
同 的 方式 来 处 理 VO (包括 所 有 的 网 络 操作 )〉 。JavaScript 所 做 的 就 是 立 





即 从 一 个 可 能 感觉 缓 慢 的 方法 中 返回 ， 留 下 一 个 函数 ， 当 操作 (例如 ， 
从 Web 服 务 占 下 载 新 的 数据 〉 完 成 时 进行 调用 。 该 函数 称 为 回调 。 当 
Ajax 调用 服务 器 时 ，JavaScript 发 出 该 请 求 ， 然 后 继续 做 别 的 事情 。 它 还 
提供 了 一 个 函数 ， 在 服务 器 调用 完成 后 调用 它 。 这 个 函数 通过 服务 器 返 
回 的 数据 被 调用 《回调 因此 而 得 名 ) ， 这 时 数据 已 经 准备 就 绪 。 





打 个 比方 ， 考 虑 在 杂货 店 买 东西 的 两 种 方式 。 一 种 方式 是 ， 一 些 商 
店 把 东西 放 到 柜 台 后 面 ， 你 必须 询问 售货员 ， 并 等 竺 她 取 来 你 想 要 的 东 
西 ， 这 就 像 刚 才 所 示 的 PHP 程 序 。 男 一 种 方式 是 ， 一 些 商 店 有 一 个 熟食 
柜台 ， 你 可 以 订购 并 得 到 一 个 订单 号 。 你 可 以 离开 去 买 别 的 东西 ， 等 订 
单 准 备 就 绪 时 取 走 。 这 种 情况 就 像 一 个 回调 。 





通 币 ， 一 个 快速 的 操作 可 以 是 阻塞 式 的 ， 因 为 需要 马上 返回 其 所 请 
求 的 数据 。 一 个 缓慢 的 操作 ， 例 如 调用 服务 占 可 能 需要 花费 儿 秒 钟 的 时 


间 ， 应 该 是 无 阻 暑 的 ， 并 通过 一 个 回调 函数 返回 其 数据 。 函 数 中 存在 回 
调 函 数 选项 将 为 计算 运行 一 个 操作 所 需 的 相对 时 间 提 供 民 好 的 线索 。 在 
单线 程 语言 如 JavaScript 中 ， 函 数 阻 暑 厦 等 待 网 络 或 用 户 时 ， 浏 响 器 不 可 
能 不 锁定 。 





因此 ， 策 略 地 使 用 回调 是 掌握 JavaScript 重 要 的 一 步 ， 知 道 它们 什么 
时 候 触发 。 例 如 ， 当 使 用 Ajax 的 数据 存储 对 象 时 ， 数 据 一 两 秒 后 就 没有 
Jo SEAT COLA ES Ja BU It") 来 创建 回调 函数 是 处 理 数 据 
加 载 的 正确 方法 。 在 JavaScript 中 所 有 这 些 外 部 的 HO《〈 数 据 库 、 调 用 服 








Fav) 都 应 该 是 非 阻 压 的 ， 因 此 学 习 使 用 财 包 和 回调 至 关 重 要 。 


在 一 些 应 该 避免 的 例外 情况 下 ，JavaScript 的 IO 不 会 阻塞 。 三 个 主 
要 的 例外 是 窗口 方法 alert()、confirm() 和 prompt()。 从 这 三 种 方法 调用 开 
始 到 用 户 关闭 对 话 框 的 那 一 刻 ， 它 们 阻塞 了 页 面 上 的 所 有 JavaScript。 此 
外 XHR 对 象 可 以 使 Ajax 以 同步 模式 调用 服务 器 ， 此 方式 在 Web Worker 
中 可 放心 使 用 ， 但 是 在 主 窗口 中 它 会 引起 浏览 器 UI 锁定 ， 应 避免 使 用 。 








强大 的 Lambda 函 数 


从 PHP 或 其 他 程序 语言 转向 JavaScript 开 发 的 程序 员 ， 往 往 会 像 在 他 
们 用 过 的 语言 中 那样 处 理 JavaScript 函 数 。 虽 然 这 样 使 用 JavaScript 函 数 
也 可 以 ， 但 是 却 错过 了 很 多 使 得 JavaScript 函 数 变 得 强大 的 东西 。 


JavaScript 函 数 可 以 用 函数 语句 〈 见 例 2-2) 或 函数 表达 式 〈 见 例 2- 
3) 创建 。 这 两 种 形式 看 起 来 非常 相似 ， | 数 ， 

函数 可 以 计算 数 的 平方 。 然 而 也 有 一 些 关 键 的 差别 。 第 一 种 形式 是 加 
载 方式 ， 这 就 是 说 ， 该 函数 将 在 财 包 的 开始 被 创 建 。 所 以 想 有 条 件 地 定 
义 函 数 时 ， 不 能 使 用 函数 语句 ， 因 为 JavaScript 不 会 等 竺 条 件 语句 执行 后 
再 决定 是 否 要 创建 函数 。 在 实践 中 ， 大 多 数 浏 览 器 允许 把 函数 放 在 if 里 
面 ， 但 这 不 是 一 个 好 主意 ， 因 为 在 这 种 情况 下 浏览 帮 做 的 事情 可 能 会 有 
所 不 同 。 如 果 一 个 函数 的 定义 应 该 是 有 条 件 的 ， 那 么 用 函数 表达 式 更 
jp, Ul 

















例 2-2: 函数 语句 








function square (x) { 
return x*x; 

}/ /注意 : 少 一 个 \; “ 

例 2-3: 函数 表达 式 

var square=function (x) { 
return x*x; 


E 








在 第 二 种 形式 一 一 了 冰 数 表达 式 中 ， 函 数 在 程序 的 流程 执行 到 这 一 扣 
时 创建 。 可 以 有 条 件 地 定义 一 个 函数 ， 或 在 一 个 较 大 的 语句 内 部 定义 函 
数 。 





此 外 ， 函 数 表达 式 没 有 给 阔 数 命名 ， 因 此 函数 可 以 为 匿名 。 然 而 ， 
这 个 例子 在 等 号 的 左 侧 指定 了 一 个 函数 名 〈square) ， 这 是 个 好 主意 ， 
原因 有 两 个 。 首 先 ， 当 调试 程序 时 ， 指 定 一 个 函数 名 ， 让 你 可 以 辨别 堆 
栈 跟 踩 过 程 中 看 到 的 是 哪个 函数 ， 没 有 它 ， 该 函数 将 显示 为 
anonymous。 如 果 用 Firebug 跟 踪 堆 栈 时 看 到 一 个 堆栈 中 有 九 个 或 十 个 显 
oe BUSS AdERIHYe. HK, THIRTY dn 
能 够 根据 需要 递归 调用 的 函数 。 





JavaScript 中 的 函数 表达 式 可 以 在 任何 能 用 表达 式 的 地 方 使 用 。 
此 ， 可 以 像 例 2-3 一 样 把 函数 分 配给 一 个 变量 ， 也 可 以 分 配给 一 个 对 象 
成 员 或 传递 给 函数 。 


JavaScript 函 数 比 C 函 数 更 像 Lisp 中 的 Lambda 表 达 式 。 在 C 类 型 语言 
中 (包括 Java 和 C++) ， 函 数 基本 上 是 一 个 静态 的 东西 。 它 不 是 一 个 可 
以 操作 的 对 象 。 虽 然 可 以 把 一 个 对 象 作 为 参数 传递 给 函数 ， 但 是 几乎 没 
有 能 力 来 构建 复合 对 象 ， 或 其 他 扩展 对 象 。 








早 在 20 世 纪 50 年 代 ， 当 时 Lisp 刚 刚 被 创建 ， 抹 省 理工 学 院 的 人 深 受 
Alonzo 教 会 Lambda Caculus (演算) 的 影响 ， 和 演算 提供 了 一 个 处 理 函 


数 和 化 归 的 数学 框架 。 因 此 ， 约 鞭 : 委 卡 锡 用 关键 字 Lambda 来 处 理 匿 名 
函数 。 这 种 做 法 已 传播 到 其 他 语言 中 ， 例 如 Perl、Python 和 Ruby。 虽 然 
关键 字 "Lambda" 没 有 出 现在 JavaScript 中 ， 但 是 其 函数 做 着 同样 的 事 
情 。 

JavaScript 中 的 函数 如 同 Lisp 语 言 中 的 函数 一 样 是 “一 等 公民 ”。 
JavaScript 中 的 函数 仅仅 是 一 个 具有 特殊 属性 可 以 被 执行 的 数据 。 函 数 可 
以 像 JavaScript 的 所 有 其 他 变量 一 样 操 作 。 在 C 和 类 似 的 语言 中 ， 函 数 和 
数据 作用 于 两 个 独立 的 空间 。 而 在 JavaScript 中 ， 函 数 就 是 数据 ， 并 且 可 
以 用 在 每 一 个 可 以 使 用 数据 的 地 方 。 函 数 可 以 分 配给 一 个 变量 、 作 为 参 
数 传递 或 作为 函数 的 返回 值 。 在 JavaScript 中 ， 将 一 个 函数 传递 到 另 一 个 
国 数 是 很 弟 见 的 操作 。 例 如 ， 可 以 用 于 为 一 个 按钮 点 击 创建 回调 函数 
〈 见 例 2-4) 。 男 外 ， 还 可 以 通过 简单 的 赋值 改变 函数 。 








例 2-4: ExtJS 用 函数 作为 处 理 函 数 的 按钮 





var button-new Ext.Button ({ 
text: 'Save', 

handler: function() { 

// 这 里 进行 保存 

} 

)): 
































[] 这 个 地 方 原文 中 是 数 语句 ”， 应 该 是 作者 写 错 了 ， 因 为 上 面 说 


EE 
了 “ 当 你 想 有 条 件 地 定义 函数 时 ， 不 能 使 用 函数 语句 ” 


闭 包 


WRIA EL (Closure) 和 带 来 的 好 人 处， 那么 在 JavaScript 中 访问 作 
为 第 一 类 对 象 的 函数 就 不 太 有 价值 了 。 闭 包 是 从 Lisp 语 言 移 植 到 
JavaScript 中 的 又 一 个 元 素 。 当 一 个 函数 在 JavaScript 中 创建 时 ， 该 函数 
可 以 对 其 生成 环境 中 任何 语法 空间 的 变量 进行 访问 。 即 使 最 初 定 义 它 们 
的 上 下 文 已 执行 完毕 ， 但 是 这 些 变量 仍然 可 用 。 该 变量 可 以 被 内 部 函数 
和 外 部 函数 访问 、 修 改 。 











闭 包 对 构建 回调 是 有 用 的 。 函 数 任意 时 刻 都 可 能 运行 来 啊 应 一 些 事 
件 ， 但 是 需要 知道 之 前 发 生 了 什么 。 





这 在 构建 浮 数 生成 器 时 非常 有 用 ， 因 为 每 当 生 成 此 函数 运行 时 将 有 
一 个 不 同 的 外 部 状态 ， 闭 包 在 创建 冰 数 中 。 也 可 以 在 一 个 生成 旨 中 创建 
多 个 函数 ， 对 于 同一 个 环境 这 些 函 数 部 是 关闭 的 。 


闭 包 是 JavaScript 函 数 最 强大 的 特征 之 一 。 在 简单 的 情况 下 ， 它 可 用 
于 创建 访问 外 层 空 间 变 量 的 函数 ， 从 而 允许 回调 访问 控制 函数 中 的 数 
据 。 然 而 更 强大 的 是 能 够 创建 把 变量 绑 定 到 一 个 范围 内 的 目 定 义 函 数 。 











如 例 2-5 所 示 ，DOM 元 素 或 CSS 选 择 器 "el" 被 包装 在 一 个 函数 中 ， 
过 一 个 简单 的 函数 调用 对 HIML 内 容 进 行 设 置 。 外 层 函 数 〈factory) 
将 "el" 元 素 绑 定 到 内 层 函 数 所 使 用 的 一 个 变量 ， 通 过 jQuery 设置 DOM 元 


素 。 外 层 函 数 将 内 层 函 数 作为 返回 值 返回 。 这 个 例子 的 结果 是 把 变量 
updateElement 的 值 设 置 为 内 层 set 函 数 ， 并 且 参 数 el 的 值 是 一 个 已 绑 定 的 
CSS 选 择 器 。 当 一 个 程序 调用 update Element 并 且 传 入 CSS 选 择 器 后 ， 
updateElement 会 返回 一 个 可 用 于 设置 与 该 HTML 相 关 的 HTML 元 素 的 冰 
数 《〈 即 用 于 设置 该 CSS 选 择 器 选中 的 HIML 元 素 的 函数 ) 。 











例 2-5: 简单 闭 包 











var factory-function factory (el) 
{ 


return function set (html) 
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j 

也 可 以 创建 多 个 在 同一 空间 内 关闭 的 函数 。 如 果 一 个 函数 把 多 个 孙 
数 返回 到 一 个 对 象 或 数组 中 ， 所 有 这 些 函 数 都 有 机 会 获得 创建 函数 的 内 
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ng 
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例 2-6 所 示 代 码 辐 浏览 器 的 工具 栏 添 加 了 一 个 tools 数 组 中 定义 的 按 
钮 。 每 个 按钮 都 有 其 上 自己 的 处 理 程序 《命名 为 clickHandler) 。 该 函数 访 
问 调 用 函数 的 变量 ， 并 将 button 和 tool 变 量 租 入 到 它 的 操作 中 。 您 只 需 
轻松 地 在 tools 数 组 中 添加 或 减 去 一 个 元 素 更 新 应 用 程序 ， 定 义 了 所 有 功 
能 的 按钮 就 会 出 现 或 消失 。 





例 2-6: 按钮 闭 包 


一 一 一 一 一 一 一 一 





$('document') .ready (function Ready()( 
var button,tools; 
tools-['save', 'add', 'delete']; 
console.info(S('div#toolbar')); 

] { 




















tools. forEach (function (tool 
console.info(tool); 

var button=$ ('<button>') .text (tool) .attr({ 
css: 'tool' 

}) -appendTo ('div#toolbar'); 
button.click(function clickHandler () { 
console.info(tool, button); 

alert ("User clicked"+tool); 


















































使 用 财 包 时 ， 很 难 知 道 哪些 变量 在 或 不 在 一 个 函数 的 空间 内 。 然 
而 ， 无 论 Google Chrome 的 开发 工具 还 是 Firebug 都 能 显示 已 闭 包 的 变量 
列表 。 





在 Firebug 中 ， 可 以 在 Script 选项 卡 的 "Watch" 中 找到 空间 链 。 在 当前 
空间 下 的 所 有 变量 是 一 个 上 升 到 主要 "window" 对 象 的 空间 层次 。 


例如 ， 在 Google Chrome 的 开发 工具 中 ， 当 代码 在 断 点 停止 时 ， 碳 
侧 栏 Scope Variables 标 记 的 "Closure" 标 记 将 显示 当前 函数 〈 见 图 2-1) 的 
内 部 变量 。 在 这 种 情况 下 ， 它 显示 我 们 点 击 了 "delete" 按 钮 ， 并 列 出 了 
按钮 本 身 引 用 的 jQuery 对 象 。 





Developer Tools - file Work current choz /testhtml 


@ a aS Se a “see 


* | closure _button.js $ 
L$ document Ja ready [function Feeds? { 
tuttom, tools; 


zi fadd’, "delete'] 
ART TAE 


ver button = Us discas 'O-text(too19. attr([ 
css: ‘tool’ i 
HA sony? di vetoolbar 23 pewesthande — jguenet A3 min ets 


J&uane-1 4 3. min eo 
cwvesk add t handism 





b this: MIMLBUTTOnE Tenant 


Y Ciccue 


Taaza: enm DU 


cien TH m 
length? 1 
> prevObjec 


i "1 Slow. 
tool; "delete* 


mot 


F ai, buton p:41 
console. infoftos), button); 


Y DOM Breakpoints 
Wo Hw oci nto 


b Workers F patug 








图 2-1 Google Chrome 开 发 工具 中 的 闭 包 
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函数 式 编 程 是 一 种 与 Lisp、Scala、Erlang、EF# 或 者 Haskall 语 言 相 关 
的 方法 ， 在 JavaScript 中 也 相当 好 用 。 函 数 式 编程 依赖 于 一 些 基 本 假设 : 


函数 是 该 语言 的 “一 等 公民 ”， 并 可 以 在 任何 能 使 用 其 他 值 的 地 方 使 


可 以 通过 组 合 简单 的 函数 构建 复杂 的 行为 。 


函数 有 返回 值 ， 在 多 数 情 况 下 ， 对 于 同样 的 输入 给 定 函 数 总 是 返回 
相同 的 值 。 


在 数学 中 ， 函 数 没 有 “副作用 *”， 如 经 典 数学 函数 y=sin GO 。 它 只 
返回 一 个 y 可 以 存储 的 值 ， 而 不 会 改变 x 或 程序 中 任何 全 局 状态 的 东西 。 
确保 函数 是 “ 纯 的 "(没有 “副作用 ”) ， 这 种 做 法 使 函数 能 在 程序 中 的 任 
何 地 方 调 用 ， 而 不 会 发 成 一 些 奇 怪 的 事情 。 在 编程 时 ， 副 作用 所 带 来 的 
问题 是 ， 可 能 会 导致 奇怪 的 、 非 常 难以 奶 踪 的 依赖 天 系 。 如 果 调 用 的 方 
法 可 能 会 叶 臻 数据 在 其 他 地 方 破坏 ， 丈 会 使 潜在 的 错误 大 大 增加 ， 那 将 
we TE T8 ME UB ERHI o 














JavaScript 函 数 可 能 有 “副作用 ”， 而 且 也 没有 内 置 的 方法 防止 函数 产 
生 副 作用 。 此 外 ，JavaScript 函 数 默认 不 返回 值 ， 除 非 已 经 显 式 调用 了 一 


个 return 语 句 来 返回 一 个 值 。 在 没有 返回 语句 时 函数 将 返回 undefined。 





当 应 用 函数 式 编程 时 ， 程 序 员 往 往 形 成 一 种 工作 模式 ， 使 用 许多 非 
常 小 的 函数 ， 每 个 函数 往往 只 用 两 三 行 代码 来 完成 一 个 目标 。 这 是 一 种 
很 好 的 设计 技术 ， 因 为 通常 很 短 的 函数 更 容易 保证 正确 性 ， 测 试 也 更 容 
E. 








常见 的 情况 是 ， 可 以 通过 组 合 简 单 函 数 生成 复杂 的 行为 。 可 以 用 简 
单 的 函数 生成 一 个 函数 链 ， 使 链 中 的 每 个 函数 都 返回 this， 从 而 允许 调 
用 下 一 个 函数 。 


jQuery 类 库 经 常 使 用 例 2-7 所 示 的 函数 链 。 在 这 个 例子 中 ，jQuery 找 
到 一 个 DOM 项 ， 设 置 其 文本 ， 淡 化 到 视图 ， 然 后 给 它 设置 一 个 单 击 处 
理 函 数 ， 用 第 二 个 DOM 链 隐藏 它 。 


例 2-7: 用 闭 包 生 成 函数 链 





S('div.alert').text("Message").fadein 
(2000) .click( 
function() 








(this) .fadeout (2000); 





— e d 
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数 作 为 参数 抽象 出 特定 的 行为 ， 而 将 通用 行为 留 在 外 层 函 数 中 。 


局 阶 函数 的 一 个 很 好 的 例子 是 数组 映射 函数 。 本 划 后 面 的 “数组 秋 
代 操 作 ” 取 一 个 数组 并 返回 一 个 新 的 数组 ， 新 的 数组 是 被 传递 的 函数 应 
用 到 数组 的 每 一 个 元 素 得 到 的 结果 。 该 模型 的 应 用 范围 很 广泛 ， 不 仅仅 
古 数组 操作 。 作 为 通用 模型 ， 高 阶 函 数 可 用 于 需要 具体 修改 通用 行为 的 
任何 地 方 。 





jQuery 库 的 接口 往往 有 利于 函数 式 编程 。jQuery 接 口 特意 优化 了 从 
页 面 中 选择 一 组 DOM 节 点 的 方法 ， 然 后 为 这 些 节 点 的 交互 提供 一 个 函 
数 接口 。 





此 外 多 数 jQuery 方法 返回 一 个 值 ， 使 它们 能 够 被 链接 。 例 如 ， 要 在 
页 面 中 找到 比 设置 矿 寸 宽 的 所 有 的 图 片 ， 可 以 选择 页 面 中 的 所 有 图 片 ， 
过 滤 挥 那些 小 于 300 像 素 的 ， 然 后 按 比 例 绚 放 列表 中 剩 下 的 图 片 。 





例 2-8 正 是 这 么 做 的 。 它 选择 文档 中 的 所 有 图 片 〈 任 何 含有 img 标 记 
的 文件 ) ， 然 后 过 滤 那 些 宽度 大 于 300 像 素 的 ‘maxWidth) ， 并 按 比例 
缩放 。 通 过 简化 过 滤 姻 和 缩放 函数 ， 可 以 确信 代码 将 按 我 们 的 意图 工 
作 。 


例 2-8: 缩放 图 卢 








var scaleImages=(function (maxWidth) 
{ 
return function () 

{ 

S('img').filter (function () 


{ 























returnS (this) .width() >maxWidth; 
}) .each (function () 

{ 

S (this) .width (maxWidth); 








当 在 一 个 耗 时 的 程序 中 处 理 操作 列表 时 ， 例 如 Ajax 调用 ， 有 时 用 一 
个 请 求 发 送 整个 列表 到 服务 器 是 不 现实 的 。 例 如 ， 发 送 整个 列表 可 能 会 
导致 服务 器 超时 。 





在 这 种 情况 下 过 历 列 表 ， 将 列表 看 做 一 个 头 部 和 尾部 将 非常 有 用 。 
取 列 表 的 第 一 个 元 系 〈 或 前 几 个 元 素 )〉 进行 处 理 ， 然 后 通过 使 用 递归 处 
理 列 表 的 其 余部 分 ， 直 到 列表 为 空 ( 见 例 2-9) 。 


我 已 经 用 这 个 方法 将 数据 添加 到 一 个 REST 界 面 。 每 调用 界面 一 次 
平均 需要 大 约 1s， 所 以 在 Ajax 调用 中 调用 它 500 次 很 不 实际 。 在 这 种 情 
况 下 ， 可 以 通过 递归 处 理 列 表 。 





注意 : 术语 Ajax 和 XHR 究 竟 是 什么 ?JavaSctipt 对 象 被 称 为 
XMLHttpRequest, 4683 AXHR. Ajax "Asynchronous JavaScript and 
XML" (异步 JavaScript 和 XML) ， 由 Jesse James Garrett]. FRE, 在 
许多 情况 下 ， 通 过 网 络 发 送 的 数据 不 是 XML， 而 可 能 是 JSON 或 其 他 数 
据 格 式 。 


例 2-9: 列表 递归 


/* 列 表 弟 归 示 例 */ 

function iterateAjax(tasks) { 

Function iterator(tasks) { 

$.ajax(( 

url: 'index.php'; 

data: tasks[0]; 

success: function(data, status, XMLHttpRequest) { 
f (tasks.length>0) { 

/用 这 里 的 结果 做 点 事 儿 


terator(tasks.slice(1)); 





















































) ; 


-一 -一 -一 -一 Hb 


iterator(tasks); 





虽然 只 用 函数 式 编程 风格 建立 一 个 完整 的 单 页 Web 应 用 程序 是 不 实 
际 的 ， 但 是 不 应 该 忽视 其 中 许多 有 用 的 想法 。 人 例如， 函数 式 编程 对 使 用 
Web Worker 非 常 适 合 〈 见 第 8 章 ) 。 


JavaScript 中 关于 函数 式 编程 没有 介绍 太 多 ， 但 相当 多 的 其 他 语言 可 
以 应 用 到 JavaScript 中 。 了 解 函 数 式 编程 的 更 多 信息 ， 请 参阅 下 列 书籍 : 





: (Real World Haskell》， 作 者 Bryan O'Sullivan, John Goerzen、 


Donald Bruce Stewart (O'Reilly) 


- (Programming Scala》， 作 者 Dean Wampler, Alex 
Payne (O'Reilly) 


- (Structure and Interpretation of Computer Programs》， 作 者 Harold 


Abelson, Gerald Jay Sussman (MIT Press ) 


原型 及 如 何 扩展 对 象 


JavaScript 中 的 一 切 都 可 以 有 附加 的 方法 。 每 一 个 元 素 都 有 一 些 供 程 
序 员 使 用 以 提高 有 效 性 的 基本 方法 。JavaScript 基 元 如 布尔 、 字 符 串 和 数 
字 作 为 对 象 都 有 第 二 次 生命 。 从 基 元 到 对 象 的 转换 是 透明 的 ， 所 以 可 以 
在 基 元 上 应 用 这 些 方法 。 实 际 上 ， 发 生 的 事情 是 将 一 个 简单 的 值 “ 例 如 
DFE) 转换 为 一 个 对 象 ， 如 果 需 要 的 话 再 转换 回来 。 








对 于 字符 串 ， 可 以 调用 大 量 的 方法 来 操作 。 一 些 方法 能 按 位 修改 字 
符 串 ， 大 部 分 将 返回 一 个 新 的 字符 串 。 在 Mozilla 开 发 者 网 站 
(http://developer.mozilla.org/en/javascript) 上 可 以 找到 一 个 完整 的 列 
表 ， 这 里 仅 列 出 最 重要 的 几 个 : 


string.indexOf() 





返回 字符 串 中 第 一 个 与 给 定子 串 匹 配 的 子 串 序号 ， 当 没 找到 时 则 返 
回 -1。 


string.lastIndexOf() 
与 ndexOfO 相 同 ， 不 过 是 从 结尾 开始 。 


string.match() 


在 一 个 字符 串 匹 配 一 个 正则 表达 式 。 
string.replace() 

蔡 换 正则 表达 式 〈 指 定 为 函数 或 字符 串 ) 。 
string.split() 

把 一 个 字符 串 分 割 成 一 个 子 串 数组 。 
string.slice() 


EBT s 


提取 一 个 子 串 





然而 ， 有 时 会 遇 到 预定 义 方法 不 够 ， 又 需要 一 些 自 定义 功能 的 情 
况 。 在 这 种 情况 下 ，JavaScript 提 供 了 一 种 不 常用 但 很 强大 的 特性 : 一 种 
扩展 内 置 对 象 的 方法 。 虽 然 你 总 是 可 以 用 一 个 简单 赋值 给 JavaScript 对 象 
分 配 一 个 方法 ， 但 是 这 不 一 定 是 最 好 的 方式 。 如 果 想 给 所 有 字符 串 添加 
一 个 方法 ， 可 以 把 该 方法 附加 给 String.prototype 对 象 。 在 JavaScript 对 象 
系统 中 ， 每 个 对 象 都 继承 自 原型 链 ， 因 此 通过 在 链 中 的 某 个 地 方 增加 方 
法 ， 可 以 添加 到 整个 这 类 对 象 。 


下 面 用 一 个 例子 来 说 明 这 个 概念 。 目 标 是 创建 一 个 名 为 populate 的 
新 方法 ， 把 值 用 一 个 模板 谷 换 。 模 板 就 是 调用 该 方法 的 对 象 ， 例 如 : 


Hello{name } 





该 字符 串 应 该 在 大 插 写 中 包含 程序 员 想 用 指定 值 蔡 换 的 关键 字 。 
Populate 的 参数 是 一 个 对 象 ， 在 模板 中 指定 关键 字 和 蔡 代 值 。 因 此 ， 如 
果 参 数 包含 一 个 名 为 name 的 属性 ， 则 name 的 值 束 会 插入 字符 串 中 。 





例 2-10 的 代码 运行 后 ，populate 方 法 就 会 附加 到 所 有 字符 串 中 。 妆 
populate 被 调用 时 ， 将 引用 标准 的 JavaScript 对 象 this 调 用 的 字符 串 。 有 了 
this 的 值 ，populate 方 法 可 以 利用 简单 的 蔡 换 在 它 的 参数 中 插入 值 。 在 一 





般 情 况 下 ， 最 好 不 修改 调用 了 方法 的 对 象 ， 但 是 要 返回 一 个 新 的 对 象 实 
Bill (函数 式 编程 想法 ) 。 


例 2-10: BRZE ERR 








String.prototype.populate-function populate (params) { 

var str-this.replace(/N(N-*N)/g, function stringFormatInner (word) { 
return params [word.substr (1, word.length-2) ]; 

)): 
return str; 

}; 
S('.target').html("Hello(name)".populate(( 
name: "Zach" 


))): 
































当然 ， 字 符 串 不 是 JavaScript 中 唯一 具有 原型 的 对 象 类 型 ， 数 字 、 数 
组 、 对 象 、 函 数 和 布尔 做 的 一 样 好 。 


警告 : 扩展 基本 对 象 的 原型 ， 例 如 Object、Attay 等 ， 有 时 会 破坏 类 
库 。 罪 魁 祸 首 通常 是 要 创建 的 属性 已 经 存在 于 对 象 中 。 要 先 确 认 正 在 创 
建 的 属性 不 存在 ， 然 后 再 添加 属性 ， 并 仔细 测试 。 


事实 上 ， 在 JavaScript 中 扩展 基本 类 型 是 一 种 有 很 大 争议 的 实践 。 有 


人 说 ， 不 应 该 这 么 做 。 我 认为 这 是 一 个 强大 的 工具 ， 不 能 全 盘 否 定 。 


Number 原 型 的 工作 方式 与 字符 串 原型 完全 相同 。 因 此 ， 可 以 定义 
一 个 新 的 方法 ， 处 理 可 能 提出 的 任何 需求 。 例 如 ， 如 果 一 个 应 用 程序 需 
要 定期 请 求 计算 平方 数 ， 可 以 非常 容易 地 添加 该 方法 〈 见 例 2-11) : 


例 2-11: 使 用 Number.prototype 


Number.protot 





type.square-i 
this; 











Function square (){ 
return this* 


}3 
6.square(); //36 








用 原型 扩展 函数 


除了 数据 对 象 如 字符 串 和 数组 外 ， 函 数 也 有 原型 ， 可 以 用 来 创建 非 
常 强大 的 复合 函数 。 通 过 把 简单 函数 组 合成 较 大 的 单元 ， 使 用 
Function.prototype 给 Function 对 象 添 加 方法 ， 可 以 把 复杂 的 逻辑 分 割 成 许 
多 简单 的 情况 。 事 实 上 ， 许 多 工具 包 正 是 这 样 工作 的 ， 并 提供 了 一 些 方 
法 来 完成 这 些 任 务 。 





有 一 个 原型 的 实例 ， 可 以 通过 执行 它 提 高 代码 的 健壮 性 ， 那 惑 是 在 
函数 执行 之 前 添加 错误 检查 。 在 例 2-12 中 ，cube 函 数 运行 时 不 检查 其 输 
否 为 数字 。 代 码 中 国 数 包装 在 一 个 负责 检查 的 拦截 器 中 。 每 当 cube 

在 后 面 被 调用 时 ， 拦 截 器 先 运行 ， 如 果 输 入 的 是 一 个 数字 再 调用 cube。 








例 2-12: 函数 拦截 器 











Function.prototype.createInterceptor=function 
createInterceptor (fn) { 

var scope={}; 

return function() { 
if (fn.apply (scope, arguments) ) { 
return this.apply(scope,arguments) ; 
} 
else( 
return null; 
} 
Fi 
}3 
var interceptMe-function cube (x) { 
console.info (x); 
return Math.pow(x, 3); 












































}3 
var cube=interceptMe.createInterceptor (function (x) { 
return typeof x==="number"; 


)): 




















ZANE YS A RE A TA Hh SER BZ Fibonacci) 
数列 。 一 个 非常 简单 暴力 的 方法 类 似 于 例 2-13。 然 而 ，fib (40) xpp 
碎 函 数 运 行 起 来 需要 相当 长 的 时 间 。 


例 2-13: fi) SEW AB SBI TE ET 














var fib-function fib(n) { 
Lf (n===1| | n===2) { 




















return (fib (n-1)+fib(n-2)); 











通过 对 该 函数 示例 的 运行 进行 快速 跟踪 ， 可 以 看 到 它 做 了 大 量 见 余 
计算 。 如 果 让 Fibonacci 方 法 对 每 个 值 只 作 一 次 计算 ， 运 行将 快 很 多 。 我 
们 可 以 通过 用 拦截 器 的 方法 包装 Fibonacci 函 数 ， 绥 存 每 次 迭代 的 结 
( 见 例 2-14) 。 拦 截 器 不 需要 知道 Fibonacci 数 列 是 如 何 产 生 的 ， 只 需要 
知道 对 于 一 个 给 定 的 输入 ， 应 该 总 是 产生 相同 的 输出 。 所 以 一 旦 
fib (n) 被 计算 查询 束 变 得 非 第 简单， 如果 没有 俘 询 到 结果 ， 可 以 通 
过 计算 得 到 。 








例 2-14 由 两 部 分 组 成 : 缓存 方法 和 实际 的 Fibonacci 数 列 生成 器 。 绥 
存 方 法 不 知道 任何 关于 Fibonacci 数 列 的 事情 ， 除 了 一 个 事实 : 一 个 给 定 


的 输入 值 将 总 是 返回 相同 的 值 ， 这 可 以 被 缓存 。 因 此 ， 当 
decoratedFib (32) 被 调用 时 ， 绥 存 会 先 检查 是 否 已 经 为 32 计 算出 了 结 
果 。 如 果 有 结果 ， 它 只 需要 直接 返回 。 如 果 还 没有 结束 ， 它 会 开始 计 
算 。Fibonacci 数 列 的 计算 是 非常 复杂 的 递归 ， 因 此 计算 32 的 Fibonacci 数 
列 必须 先 计算 31、30 等 。 该 函数 将 递归 地 寻找 结果 ， 直 到 找到 为 止 。 如 
果 这 是 函数 第 一 次 运行 ， 将 在 种 子 值 中 找到 n=2 和 n=1。 














虽然 很 多 人 不 会 在 Fibonacci 数 列 上 人 花费 太 多 时 间 ， 但 是 它 是 一 个 很 
好 的 使 用 函数 原型 的 例子 ， 可 以 用 两 个 很 短 的 函数 结合 得 到 非 第 强大 的 


士 
结 








—j 


， 其 实 是 为 了 显示 如 何 从 函数 缓存 没有 副 


注意 : 这 些 例子 复杂 多 
上 这 可 能 不 是 写 这 个 代码 最 好 的 方式 。 


例 2-14: ARSE AB RBM tt HT 











var smartFib-(function makeFib() { 
var fibsegquence=[0, 1, 1]; 

var fib-function fib(n) { 

if (fibsequence[n]) { 

return fibsequence[n]; 

} 
FibN=fib(n-1)+fib(n-Z2); 
fibsequence [n]=fibN; 
return fibsegquence[n]; 
ie 
return fib; 

0): 

Function.prototype.decorate-function Decorate (params) { 
return params.decorator(this,params.initialData); 

}; 


var cache=function cache (lambda, initial) { 































































































return function cacheRunner (n) { 
if (initial [n] !==undefined) { 
return initial[n]: 

} 

elsef{ 

initial [n]=lambda(n) ; 

return initial[n]: 

} 

F 

}3 

var decoratedFib-function fib(n) { 
return decoratedFib (n-1)+decoratedFib (n-2) ; 
).decorate ({ 

decorator: cache, 

initialData: [0, 1, 1] 

)): 









































假设 一 个 函数 定期 运行 啊 应 用 户 输 入 ， 但 是 在 给 定 的 时 间 内 运行 次 
数 不 能 超过 一 次 。 这 很 简单 ， 当 该 函数 最 后 被 调用 时 ， 用 函数 原型 创建 
一 个 要 存储 的 包装 函数 ， 让 它 在 指定 时 间 内 不 能 再 次 运行 。 可 以 根据 应 
用 程序 的 需要 选择 不 运行 它 ， 或 者 抛 出 一 个 异常 。 














在 为 一 面 ， 也 可 以 给 函数 创建 一 个 方法 ， 在 一 个 延 时 后 执行 或 定期 
执行 。 通 常 ， 一 个 任务 需要 在 一 个 事件 后 运行 ， 但 不 应 该 运行 过 于 频 
繁 。 例 如 ， 你 可 能 要 检查 用 户 的 输入 ， 但 是 每 次 按键 后 都 运行 检查 有 些 
过 分 。 设 置 一 个 每 250ms 运 行 一 次 的 方法 可 以 解决 这 个 问题 。 





这 有 两 种 实现 方式 。 第 一 ， 可 以 运行 一 次 该 方法 ， 并 且 在 到 达 指 定 
时 间 前 不 允许 它 再 次 运行 。 第 二 ， 可 以 创建 一 个 方法 ， 使 它 在 调用 后 会 
以 一 定时 间 间 隔 运 行 ， 并 且 在 调用 时 复位 定时 器 。 如 果 我 们 的 目的 是 当 
用 户 打 字 停 止 或 一 些 其 他 的 事件 暂停 时 运行 某 些 代码 ， 这 种 模式 将 非常 








有 用 。 在 实践 中 ， 一 个 新 的 方法 将 作为 包装 了 基本 JavaScript 的 
setTimeoutO0 和 setInterval(0 方 法 的 包装 器 运行 ， 使 用 更 加 方便 。 也 可 以 创 
建 一 个 方法 根据 预 设 安 排 今后 的 任务 或 取消 现 有 的 任务 。 





柯 里 化 和 对 象 参数 


在 函数 式 编程 中 ， 一 个 第 见 的 编程 模型 是 “和 柯 里 化 ”(currying) 一 

个 函数 。 因 Haskell 语 言 的 一 个 特点 而 得 名 ， 柯 里 化 是 指 将 几 个 参数 组 合 
成 一 个 单一 对 象 的 做 法 ， 这 样 束 可 以 把 它们 作为 一 个 参数 传递 给 函数 。 

如 果 一 个 函数 需要 大 量 的 参数 ， 在 JavaScript 中 最 好 是 放弃 长 长 的 参数 列 
表 ， 并 用 一 个 单一 对 象 作 为 参数 。 通 过 将 一 个 对 象 作为 参数 ， 可 以 把 各 
种 选项 全 部 转换 成 名 称 / 值 对 。 这 样 做 的 好 处 之 一 是 ， 参 数 的 顺序 变 得 

无 天 紧要 。 此 外 ， 可 以 创建 一 些 或 全 部 的 参数 选项 。 对 于 接收 了 许多 选 
项 的 复杂 方法 会 有 很 大 帮助 。 特 别 对 一 些 ExtJS 中 的 对 象 创建 方法 往往 

非常 有 用 。 











柯 里 化 参数 的 最 简单 方法 是 创建 一 个 函数 ， 用 和 它 接收 参数 岂 ， 并 返 
一 个 函数 ， 返 回 的 函数 将 以 预先 提供 的 默认 参数 调用 原 函 数 《〈 见 例 2- 
) 。 这 样 就 可 以 建立 一 套 默认 值 ， 不 必 每 次 都 指定 ， 同 时 允许 调用 者 

改变 他 们 想 要 修改 的 任何 参数 。 


例 2-15: 柯 里 化 示例 








Function.prototype.curry=function FunctionCurry (defaults) { 
var fn=this; 

return function (params) { 

return fn.apply(this,defaults.concat (params) ); 
































这 种 模式 也 可 以 应 用 于 创建 对 象 。 作 为 一 个 接受 参数 块 的 对 象 构造 
函数 ， 可 以 用 一 个 自 定 义 类 作为 对 象 的 子 类 ， 调 用 父 类 的 构造 函数 ， 调 
用 时 子 类 将 用 一 套 默 认 参 数 禾 再 用 户 传递 的 参数 。 


数组 友 代 操作 


像 其 他 JavaScript 中 的 第 一 类 对 象 一 样 ， 数 组 也 有 方法 。 标 准 数组 有 
一 些 为 程序 员 设 计 的 方法 。 在 较 新 版 本 的 Firefox 浏 览 器 中 (1.5 以 上 版 
本 ) ， 也 已 创建 了 一 些 标准 的 迭代 方法 。 


这 些 操作 的 基本 思路 是 : 处理 一 个 lambda 函 数 ， 并 将 其 应 用 到 数组 
中 的 每 个 元 素 ， 得 到 一 些 结果 。 通 过 几 个 小 函数 使 用 这 种 方法 ， 可 以 处 
理 一 个 数组 ， 并 创建 它 的 操作 集 ， 该 操作 集 可 以 建立 一 个 代数 数组 。 这 
有 反 过 来 义 可 以 让 你 用 基本 的 操作 集合 建立 非 第 强大 的 操作 集 。 





第 一 个 数组 方法 是 map0。map 函 数 包 含 一 个 数组 和 一 个 方法 作为 参 
数 。 它 把 该 方法 应 用 到 数组 的 每 一 个 元 素 ， 并 用 返回 值 创 建 一 个 新 数 
组 。 所 以 给 定 一 个 数字 的 数组 ， 通 过 在 map0 中 简单 地 对 每 个 数字 应 用 
square 国 数 ， 可 以 创建 一 个 平方 数 的 数组 。 





注意 : 数组 方法 如 map 在 多 数 现代 浏览 器 上 都 有 (它们 已 经 被 加 入 
IE9) 。 然 而 ， 如 果 没 有 也 可 以 添加 该 功能 。 在 Mozilla 的 开发 者 网 站 上 
可 以 找到 所 有 数组 方法 的 示例 代码 。 


调用 的 函数 接收 数组 的 当前 值 、 数 组 中 当前 位 置 的 序号 和 整个 数组 
的 序号 作为 参数 。 通 常情 况 下 ，map 工 作者 函数 只 需要 查看 数组 的 当前 
值 ， 见 例 2-16。 


例 2-16: 数组 Map 





[1, 2, 3, 4, 5] .map (function (x){ 
return x*x; 

)): 

/ /结果 : [1, 4, 9, 16, 25] 














不 过 ， 在 一 些 情况 下 这 可 能 还 不 够 。 例 2-17 的 目的 是 显示 数组 中 一 
个 值 的 平均 运行 次 数 ， 因 此 每 个 元 素 需 要 了 解 其 相 邻 元 聚 。 





例 2-17: 平均 运行 次 数 








function makeRunningAverage(list,size) 
{ 
return list.map(function(current,index,list) 

{ 

var start,end,win; 

/* 找 到 深 动 平均 值 窗口 的 开始 点 和 结束 点 */ 
start=index-size<0? 

0: 

index-size; 

/* 提 取 该 窗口 */ 

end=index+size>list.length? 

list.length: 

indext+size; 

win=list.slice(start,end); /* 取 平均 值 */ 

return a E eos current) 
{ 
return accumulator+current; 
}, 0) / (end-start); 

)): 

} 



































fi FH] forte PE EBA ua ALATA. Bc, OE OT 3A 
代码 隔离 ， 人 允许 程序 员 将 数组 视 为 一 个 整体 。 其 次 ， 在 避免 副作用 方 


面 ， 作 为 内 部 函数 并 保持 函数 简短 ， 可 以 写 出 非常 健壮 的 代码 。 


男 一 个 应 考虑 的 情况 是 增加 回调 处 理 函 数 。 用 一 个 for 循 环 明 历 元 素 
并 增加 处 理 函 数 ， 可 以 不 使 用 JavaScript 函 数 的 封闭 属性 。 你 可 能 会 使 用 
类 似 于 例 2-18 所 示 的 方法 ， 但 是 这 样 达 不 到 预期 目的 。 在 这 种 情况 下 ， 
该 方法 将 总 是 显示 最 后 一 个 元 素 。 在 这 里 具有 欺骗 性 的 是 ， 在 任何 情况 
下 引用 的 i 值 都 是 最 后 一 个 值 。 闭 包 总 是 能 知道 变量 的 当前 值 ， 而 不 是 
它 创 建 时 的 值 。 当 for 循 环 壳 历 列 表 时 ， 会 改变 i 的 值 。 在 例 2-19 中 ， 代 
码 将 正常 工作 。 在 这 种 情况 下 ， 每 次 友 代 所 引用 的 节点 都 是 独立 的 ， 写 
处 于 函数 空间 的 内 部 。 

















例 2-18: forj? 








for(var i=0; ixnodes.length; it=1) { 
nodes[i].bind('click', function() { 
console.info(nodes[i]); 

)): 

} 

















例 2-19: 绑 定 forEach 














nodes. forEach (function (node) { 
node.bind('click', function () { 
console.info (node); 

)): 

)): 

















下 一 个 要 注意 的 方法 是 filter0。filter 对 数组 进行 处 理 ， 该 方法 返回 


true 的 数组 子 集 。 例 2-20 中 的 迭代 函数 接收 与 map 函 数 相 同 的 参数 ， 但 应 
返回 一 个 布尔 {8 


例 2-20: Filtere Zi 





[1, 2, 3, 4, 5].filter (even); =>[2, 4] 





如 果 你 想 知 道 一 些 因素 是 人 否 对 数组 的 所 有 元 素 都 为 真 ， 用 ev ery027 
法 。 它 将 对 数组 应 用 一 个 方法 ， 如 果 该 方法 对 数组 中 的 所 有 元 素 都 返回 
true， 则 返回 true。 当 第 一 次 出 现 false 后 停止 。 





如 果 你 想 知 道 有 些 条 件 是 否 对 列表 中 的 至 少 一 个 元 素 为 真 ， 可 以 使 
用 some() 方 法 。 如 果 列 表 中 人 至少 有 一 个 元 素 返 回 trtue， 则 将 返回 true。 5 
every() 方 法 一 样 ， 它 将 只 评价 得 到 结果 的 元 素数 量 〈 当 第 一 次 出 现 true 
BITE o 








JavaScript 的 数组 代数 中 的 最 后 两 个 操作 是 reduce() 和 reduceRight()。 
名 一 种 方法 把 一 个 数组 简化 成 一 些 简单 的 值 。 这 对 一 个 累加 器 是 非常 有 
用 的 。 在 这 种 情况 下 ， 调 用 函数 也 接收 昧 加 值 。 因 此 ， 代 码 中 使 用 
reduce() 对 列表 求 和 ， 就 会 如 例 2-21 所 示 。 你 可 以 提供 一 个 可 选 的 初始 
值 ， 作 为 第 一 次 迭代 之 前 的 值 进行 传递 。 如 果 不 这 样 做 ， 开 始 时 将 使 用 
数组 的 前 两 个 元 素 。 


例 2-21: Reduce 函 数 








[0, 1 2, 3, 4, 5] .reduce (function (prev, current) { 
return prev-tcurrent; 
)» 


initialValue) ; 





如 宁 JavaScript 数 组 代数 不 提供 完成 任务 所 需要 的 方法 ， 使 用 
Array.prototype 对 象 来 创建 它 。 如 果 有 一 个 数字 列表 需要 创建 该 列表 的 
一 个 标准 偏差 ， 例 如 ， 可 以 简 蛙 地 套用 一 个 标准 差 的 方法 。 在 例 2-22 中 
为 数组 原型 增加 了 一 个 标准 偏差 方法 。 





例 2-22: 标准 偏差 





var stdDev=[1, 2, 7, 2....].stddev(); 
Array.reduce.sum=function sum() { 

var sum=this.reduce (function (previous, current) { 
return previous+current; 

})s 
return sum; 

}; 

Array.prototype.square-function squareArray() { 

return this.map (function (x) { 

return x*x; 

}); 

Array.prototype.mean=function mean () { 

return this.sum()/this.length; 

Ji 

Array.prototype.standardDeviation=function standardDeviation() { 
var mean=this.mean (); 

var intl=this.map (function (n) { 

return n-mean; 

)): 

var int2-intl.square(); 

var int3-Math.sqrt (int2.sum()/mean.length) ; 

}; 

// 给 它 起 个 短 点 的 名 字 
Array.prototype.stddev=Array.prototype.standardDeviation; 






























































你 也 可 以 扩展 对 象 





如 果 你 喜欢 map 函 数 而 且 和 希望 把 它 用 在 你 的 对 象 上 ， 也 可 以 在 代码 
中 添加 它 。 可 以 创建 一 个 map 函 数 ， 不 仪 能 访问 JavaScript 对 象 中 的 所 有 
节点 ， 而 且 能 将 函数 递归 应 用 到 它 的 每 个 子 节 点 上 。 对 于 把 数据 绩 构 转 
换 成 某 种 形式 的 市 点 树 来 说 ， 这 可 能 非常 有 用 。 例 2-23 检 查 用 户 的 浏览 
器 是 否 已 经 为 指定 对 象 定义 了 mapO0 和 filter0， 然 后 如 果 有 必要 的 话 定义 
该 函数 。 





例 2-23: 将 map 和 filter 扩 展 为 对 象 








if (Object.prototype.map===undefined) { 
Object.prototype.map=function (fn) { 
var newObj={}; 
for(var i in this) { 

if (this.hasOwnProperty(i)) { 

newObj [i]=fn(i,this[i], this); 

} 

} 

return newObj; 

JS 

} 

if (Object.prototype.filter undefined) { 
Object.prototype.filter=function (fn) { 
var newObj={}; 

for(var i in this) { 

if (this.hasOwnProperty(i)) { 
if(fn(i,this[i], this)) { 

newObj [i]=this [i]; 

} 

} 

} 

return newObj; 


}s 

























































































JavaScript 对 象 可 以 成 为 现代 应 用 程序 中 任意 复杂 的 树 ， 能 够 使 用 在 
文件 系统 中 指定 路 径 类 似 的 方法 找到 特定 对 象 的 一 个 子 树 。 其 实 ， 这 非 
前 容易 实现 。 


path 方 法 的 路 径 形 式 与 UNIX 文 件 路 径 相 同 ， 如 "/path/to/our/data"。 
它 使 用 一 个 内 部 函数 ， 以 递归 方式 向 下 遍历 数据 树 ， 直 到 找到 请 求 的 元 
素 ， 并 返回 它 。 当 发 现 元 素 不 存在 时 ， 返 回 undefined。 乍 一 看 ， 只 是 调 
用 了 每 个 迭代 的 顶层 路 径 函 数 ， 这 种 做 法 似乎 有 道理 。 但 这 不 是 一 个 好 
主意 ， 因 为 有 可 能 在 某 些 情况 下 ， 路 径 中 的 一 些 点 上 可 能 会 有 一 个 有 索 
引 的 数组 ， 如 果 Array.prototype 与 Object.prototype 不 相同 ， 将 导致 迭代 被 
破坏 。 通 过 在 内 层 函 数 中 进行 搜索 ， 可 以 避免 这 个 问题 。 











例 2-24 所 示 的 方法 可 以 处 理 数 组 和 对 象 。 如 果 路 径 的 一 部 分 是 一 个 
数字 、 数 组 和 对 象 ， 那 么 都 可 以 用 方 括号 标记 寻 址 ， 例 如 “[4]”， 则 将 取 
组 中 的 第 5 个 元 素 。 


例 2-24: 通过 Path 选 择 














Object.prototype.path=function FindByPath (path) { 
var elementPath= ze th.split('/'); 












































var findItter=f tion findItter (element, path) { 
/ /如 果 元 素 为 空 则 直接 名 略 并 继续 查询 
if (path[0]==="'') { 

















return findItter(element,path.slice(1)): 
} 
if (element [path[0] ]===undefined) { 




















return undefined; 





if (path. length===1) 
return element [path 





{ 
[0] ] ; 





return findItter(element[path[0]], path.slice(1)); 























return findItter(this,elementPath); 





第 3 章 ”测试 JavaScript 心 用 





测试 驱动 开发 的 软件 开发 方式 在 过 去 几 年 风靡 一 时 。 通 过 使 用 目 动 
化 且 可 重复 的 测试 方法 ， 可 以 帮助 开发 人 员 编 写 更 加 高 质量 的 代码 ， 并 
且 确 保 新 添加 的 代码 不 会 影响 原 有 的 功能 。 一 些 文 持 者 甚至 认为 测试 样 
例 要 在 实际 代码 之 前 编写 。 





在 大 多 数 服务 器 端 开 发 平台 中 ， 测 试 已 成 为 开发 的 一 个 关键 因素 。 
在 PHP、Java、Ruby 等 开发 环境 中 已 经 出 现 Solid 测 试 框架 。 然 而 ， 在 大 
多 数 这 些 语言 中 测试 的 标准 方法 对 JavaScript 不 起 作用 。 为 什么 ? 让 我 们 
来 看 看 几 个 原因 。 





服务 器 端 测试 套件 一 般 都 只 是 在 一 组 环境 下 的 测试 程序 。 如 果 一 个 
REST 服 务 是 用 Python 开发 的 ， 那 么 测试 人 员 可 以 用 几 个 安全 假设 创建 
测试 。 例 如 ， 他 们 可 能 会 知道 ， 它 会 在 Linux 上 运行 的 Python3.0， 以 及 
所 有 支持 软件 的 特定 版 本 。 


Web 应 用 程序 的 开发 人 员 没 有 这 种 信心 。 用 户 将 使 用 Firefox、 
Internet Explorer、Chrome、Safari 以 及 Opera 浏 览 器 ， 而 且 每 种 浏览 器 都 
有 好 儿 个 版 本 。 测 试 僚 件 必须 能 够 跨 浏览 器 和 操作 系统 处 理 测 试 ， 因 为 
它们 中 的 每 一 个 都 略 有 不 同 。 





兰 别 主要 由 两 个 原因 产生 。 首 移 ， 语 言 本 喘 在 不 同 的 浏览 器 间 就 有 


差异 。 例 如 ，Firefox 支 持 关键 字 const， 而 Internet Explorer 不 支持 。 其 
次 ， 许 多 HTML 接口 只 存在 于 某 些 浏览 器 或 浏览 器 版 本 中 。 本 书 中 的 许 
多 JavaScript 接 口 也 只 存在 于 某 些 浏览 器 中 ， 测 试 必须 能 够 适应 这 些 差 异 
并 在 需要 的 地 方 进 行 退 化 处 理 。 











Java 或 者 C 方 面 的 测试 专家 主要 讨论 一 些 单元 测试 、 集 成 测试 等 测 
试 方法 。 这 些 测试 方法 的 原理 是 一 样 的 ， 只 是 目的 不 一 样 。 


单元 测试 是 一 种 运行 很 快 的 小 规模 测试 ， 一 次 测试 一 个 功能 。 它 们 
需要 遵循 的 准则 是 ， 对 于 任何 特定 的 函数 、 方 法 或 接口 ， 如 果 给 定 的 输 
入 是 x 那么 程序 应 该 执行 的 功能 就 是 y。 它 们 测试 的 是 系统 的 基本 逻辑 。 
每 个 单元 测试 理论 上 应 该 只 测试 一 个 方法 或 者 一 小 块 代码 。 


集成 测试 是 一 种 相对 复杂 的 测试 方法 ， 它 用 于 确认 所 有 代码 协同 工 
作 的 时 候 能 运行 民 好 。 它 们 倾 回 于 遵循 的 原则 是 “如 果 用 户 点 击 了 这 个 
按钮 ， 那 么 系统 就 做 这 个 工作 ”。 


然而 ， 这 些 测试 方法 在 JavaScript 中 似乎 不 像 在 其 他 语言 中 那么 适 
用 。 在 JavaScript 中 ，QUnit 《参见 本 章 的 "Qunit" 一 节 ) 更 加 适用 于 单元 
测试 ， 而 Selenium 〈 人 参见 本 章 的 "Selenium" 一 节 ) 则 更 适用 于 集成 测 
试 。 然 而 ， 由 于 JavaScript 中 趋同 于 使 用 很 多 小 的 匿名 函数 ， 所 以 造成 很 
难 运行 单元 测试 ， 因 为 这 些 函 数 很 难 被 测试 代码 调用 。 一 种 辅助 测试 的 
方式 是 在 这 些 函数 的 外 面 创 建 很 多 功能 一 样 的 函数 ， 可 以 把 它们 放 在 更 


大 的 命名 空间 里 面 ， 也 可 以 把 它们 作为 可 以 测试 到 的 函数 的 返回 值 。 


在 例 3-1 中 ，makeInList 用 于 测试 传 入 的 参数 list 中 是 人 否 包 含 记录 中 的 
东 个 字段 field。 这 种 情况 下 ， 返 回 的 函数 是 一 个 无 副作用 的 函数 ， 很 容 
易 被 测试 。 例 3-2 展 示 了 测试 使 用 makeInList 返 回 的 函数 两 个 方法 。 如 果 
传 入 的 是 "NY"， 函 数 将 返回 true， 因 为 创建 的 列表 中 含有 "NY"。 反 之 传 
ACT" #2218 El false- 


例 3-1: In-list 测 试 














var makeInList=fuction(list, field) 
{ 

return function inList (rec) 

{ 

var value=rec[field]; 

return list.indexOf (value) !==-1; 

}3 

): 


























43-2: 使 用 In-list 测 试 








var nynjemakeInList(['NY', 'NJ'], 'state'); 
ok(nynj((state: "NY"})); 
ok(!nynj((state: "CT"})); 





JavaScript iz fT IN BiU tH BORER. TEARS eh RPG 7S 
元 测试 一 般 由 几 个 连续 的 步骤 组 成 : 


1. 设 置 所 需 的 测试 套件 。 


2. 运 行 要 测试 的 方法 。 


3. 根 据 一 些 标准 测试 该 方法 的 结果 。 


测试 类 型 


测试 人 员 经 常 谈论 的 几 种 测试 包括 单元 测试 、 集 成 测试 等 。 这 些 测 
试 的 基本 工具 是 一 样 的 ， 只 是 测试 的 层次 不 一 样 。 


单元 测试 的 目的 是 测试 一 小 块 的 代码 ， 经 常 是 函数 或 者 方法 。 比 
如 ， 例 3-2 就 是 一 个 单元 测试 。 它 仅仅 测试 了 一 个 函数 ， 并 且 检 查 了 这 
了 涵 数 所 有 可 能 运行 到 的 情况 。 


集成 测试 用 来 确保 整个 系统 按照 之 前 设计 的 方案 运行 。 集 成 测试 可 
以 是 在 浏览 器 中 点 击 一 个 按钮 ， 然 后 验证 数据 库 的 记录 是 否 被 更 新 ， 从 
而 验证 整个 系统 是 不 是 可 以 协同 工作 。 集 成 测试 一 般 运 行 得 比 单元 测试 
慢 ， 所 以 ， 许 多 人 实时 运行 单元 测试 ， 在 晚上 才 进 行 集成 测试 


验收 测试 用 户 确认 软件 是 不 是 满足 客户 的 需求 。 这 个 测试 的 主要 目 
的 不 在 于 技术 上 ， 而 是 确保 软件 按照 程序 员 的 设计 工作 ， 因 为 这 样 才 能 
满足 用 户 的 需求 ， 从 而 进行 部 夏 。 








然而 ， 这 种 模型 不 适合 JavaScript。 在 这 种 模型 中 ， 行 为 可 以 不 是 实 
时 的 ， 但 是 一 段 时 间 后 可 能 发 生 。 在 JavaScript 中 ， 这 样 的 测试 会 失败 ， 
因为 在 方法 运行 和 它 的 结果 准备 好 之 间 可 能 有 延迟 。 在 JavaScript 中 ， 测 








试 可 能 更 像 下 面 这 样 : 
1. 设 置 所 需 的 测试 套件 。 
2. 运 行 要 测试 的 方法 。 


3. 等 待 一 个 Ajax 调用 完成 。 


4. 为 动作 的 结果 检查 DOM (包括 页 面 以 外 部 分 的 不 良 影响 )。 





此 外 ， 还 有 一 个 障碍 ， 在 许多 情况 下 要 运行 的 方法 是 DOM 元 系 上 
的 一 个 回调 。 为 了 在 这 种 情况 下 运行 单元 测试 ， 需 要 找到 该 DOM 元 
素 ， 并 给 它 正 确 的 事件 。 这 种 调用 处 理 程序 的 方式 与 实际 用 户 使 用 该 应 
用 时 的 方式 尽 可 能 相似 。 甚 至 还 不 够 : 它 不 能 通过 DOM 中 的 各 种 复杂 
的 接口 再 现 用 户 的 点 击 体验 。 











基于 浏览 喜 的 应 用 程序 在 测试 用 户 界 面 时 也 比较 复杂 。 因 为 大 多 数 
的 测试 驱动 开 肥 部 是 在 服务 器 端 完成 ， 或 者 是 测试 数据 处 理 的 代码 ， 这 
些 测试 的 输入 输出 相对 比较 固定 。 对 于 给 定 的 函数 ， 输 入 "A" 和 输 
入 "B" 返 回 值 都 是 确定 的 。 











但 是 JavaScript 程 序 由 于 更 加 关注 用 户 界 面 而 变 得 更 加 复杂 ， 因 为 可 
能 的 用 户 输 入 行为 序列 变 得 非 第 硕大 。 所 以 主要 测试 的 数目 就 非常 大 ， 
甚至 开发 者 都 不 能 想到 所 有 的 情况 。 比 如 ， 如 果 用 户 在 输入 框 输入 名 字 
的 时 候 输入 了 重音 符号 怎么 办 ?这 时 候 系 统 还 能 正常 反馈 吗 ? 


QUnit 


QUnit 是 由 制作 jQuery 的 同一 个 团队 开发 的 JavaScript 测 试 套件 。 在 
QUnit 中 创建 一 个 测试 套件 ， 用 测试 套件 的 名 称 和 将 要 实际 运行 测试 的 
函数 两 个 参数 调用 测试 郴 数 。 


注意 : 也 可 以 配置 QUnit 来 检查 一 个 正在 运行 的 测试 是 否 引 入 任何 
新 的 全 局 变量 ， 由 于 全 局 变量 是 JavaSctipt 错 误 的 主要 来 源 之 一 ， 因 此 这 
是 一 个 非常 有 用 的 功能 。 为 了 测试 全 局 变量 漏洞 ， 开 始 测试 时 向 URL 添 
加 "?noglobals"。 


JSLint 的 使 用 ( 见 附录 : JSLint) 也 有 助 于 发 现 全 局 漏洞 和 很 多 其 他 
错误 。 可 以 在 一 组 JavaSctipt 文 件 上 运行 JSLint 作 为 自动 测试 套件 的 一 部 


分 。 


简单 示例 


以 一 个 非常 普通 的 Ajax 应 用 为 例 。 在 例 3-3 中 ， 有 一 个 带 有 一 个 按 
钮 的 HTML 页 面 。 当 单 击 按钮 时 ，JavaScript 的 handleButtonClickO 函 数 
将 一 个 Ajax 碍 询 发 送 给 服务 器 ， 请 求 获 得 一 个 文件 〈 在 这 种 情况 下 ， 它 
是 一 个 静态 HTML 文 件 ) ， 然 后 将 该 文件 放 在 页 面 上 的 <div 之 中 。 请 注 
意 ， 为 简单 起 见 ， 把 JavaScript 直 接 放 在 文件 中 。 一 个 清理 器 将 





JavaScript 保 持 在 一 个 单独 的 随 测试 一 起 加 载 的 文件 中 。 





为 了 测试 这 一 点 ， 需 要 运行 该 按钮 的 回调 并 验证 结果 是 正确 的 。 有 
两 种 方法 可 以 做 到 这 一 点 。 测 试 程序 可 以 发 送 一 个 单 击 事件 给 按钮 ， 或 
者 直接 调用 阔 数 。 对 于 QUnit 中 的 测试 ， 直 接 调 用 函数 更 简单 ， 但 要 求 
把 函数 绑 定 到 一 些 变 量 上 ， 这 些 变 量 可 以 通过 测试 工具 看 到 。 本 例 中 已 
经 这 样 做 了 ， 将 函数 赋值 给 变量 handleButtonClick。 调 用 回调 后 ， 测 试 
函数 进行 短暂 等 待 ， 让 Ajax 调用 运行 ， 然 后 用 jQuery 检查 元 素 是 售 存 
在 。 








例 3-3: 简单 应 用 





<!DOCTYPE html> 

<html> 

<head> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src='button.js'> 






































</script> 

<script> 

var handleButtonClick=function handleButtonClick(){ 
$().get('document.html', '', function (data, status) { 
$("<div>").attr({id: 'target div']).text(data).appendTo('body'): 


})s 

Js 

$('button.click_me').click(handleButtonClick); 

</script> 

<link rel="stylesheet" 

href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" 

type="text/css" 

media="screen"/> 

<script 
src="http://github.com/jquery/qunit/raw/master/qunit/gunit.js"> 
</script> 

<script src='simple-test.js'></script> 

</head> 

















<body> 

<button id-'click me'>Click Me</button> 

<!--Qunit SORIA #--> 

<h1 id="qunit-header">QUnit example</hl> 

<h2 id="qunit-banner"></h2> 

<h2 id="qunit-userAgent"></h2> 

«ol id="qunit-tests"></ol> 

<div id="qunit-fixture">test markup,will be hidden</div> 
</body> 

</html> 

















QUnit 测 试 工具 被 页 面 加 载 到 加 载 器 上 ， 像 其 他 要 加 载 的 JavaScript 
程序 一 样 。 本 例 从 http://github.com/jquery/qunit/raw/master/qunit/qunit.js 
加 载 。 该 文件 将 开始 运行 加 载 器 上 的 任何 jQuery 测试 。 一 旦 测试 运行 完 
毕 后 ， 这 些 测试 结果 将 显示 在 页 面 上 ， 这 是 QUnit 为 何 需 要 DOM 中 存在 
这 些 元 素 的 原因 。 


为 了 测试 这 个 例子 ， 在 例 3-3 中 测试 工具 将 加 载 QUnit， 然 后 调用 
handleButtonClick 方 法 。 例 3-4 通 过 传递 值 1000 给 setTimeout 方 法 ， 等 行 
一 秒 钟 直到 文件 被 加 载 。 一 秒 之 后 ， 测 试 <div> 在 DOM 中 是 否 存在 
《第 一 次 调用 equal) ， 从 div 得 到 文本 ， 并 检查 文本 中 的 第 一 个 单词 是 
否 为 "First"， 这 是 预期 值 〈 第 二 次 调用 equal) 。 可 以 选择 一 个 更 完整 的 
测试 ， 每 四 分 之 一 秒 检查 一 次 该 元 素 ， 直 到 它 出 现 或 到 达 最 大 时 间 限 
制 。 在 现实 世界 中 网 页 加 载 时 间 可 能 有 所 不 同 ， 这 取决 于 外 部 因素 ， 包 
括 网 络 的 使 用 和 服务 器 负载 。QUnit 测 试 是 一 个 由 测试 工具 调用 的 
JavaScript 函 数 。 请 看 例 3-4 中 的 简单 测试 。 测 试 使 用 多 个 要 通过 测试 必 
须 满足 的 断言 函数 。 为 了 测试 一 个 值 是 否 等 于 预期 的 结果 ， 可 使 用 











equal() 方 法 ， 它 有 三 种 方式 ， 测 试 值 、 预 期 的 结果 和 参数 选项 = 
MAS, AP eine BAM. TEAR SORA BIT 398 EMR AM 
的 对 象 。 如 果 在 代码 写 完 6 个 月 后 才 测 试 代码 ， 则 更 为 有 用 。 








例 3-4: 简单 测试 











test("Basic Test", function() { 
// 判 断 目标 属性 不 存在 

equal ($('div#target div').length, 0, 
"Target element should not exist"); 

// 运 行 方法 

handleButtonClick(); 

equal ($('div#target div').length, 0, 
"Target element should still not exist"); 

window.setTimeout (function () { 

start(); 
equal ($('div#target div').length, 1, 
"Target element should now exist"); 
equal("First", 









































> ("div#target div') .text().substr(0, 5), 
"Check that the first word is correct"); 
}, 1000); 

stop(): 


)): 





用 QUnit 测 试 


要 运行 的 QUnit 测 试 必须 包含 QUnit 样 式 表 和 JavaScript 文 件 ， 这 些 可 
以 直接 从 Github 拖 入 或 从 本 地 加 载 〈 见 例 3-3) 。DOM 还 必须 包括 几 个 
元 素 ， 让 QUnit 使 用 以 显示 其 结果 。 在 例 3-3 中 的 HTML 下 方 可 以 看 到 。 

是 运行 测试 需要 的 所 有 条 件 。 


QUnit 提 供 了 八 个 断言 函数 。 除 了 equal0 函 数 《〈 它 出 现在 我 们 前 面 
的 例子 中 ) 外 ， 还 有 对 等 式 和 ok() 方 法 的 进一步 测试 ， 该 方法 测试 传递 
给 它 的 值 是 否 为 真 。 还 有 根据 JavaScript“===” 操 作 符 的 strictEqual0 测 
试 ， 而 equal0 使 用 “==” 操 作 进 行 比 较 。 








为 了 测试 一 个 更 复杂 的 数据 结构 是 否 是 相同 的 ， 使 用 deepEqual()。 
它 对 两 个 数据 结构 作 递 归 比 较 。 


每 个 等 式 函 数 都 有 一 个 相反 的 形式 ， 可 以 测试 等 式 的 缺陷 : 
notEqual()、notStrictEqual() 和 notDeapEqual()。equal 的 各 版 本 都 用 相同 
的 参数 ， 但 测试 相反 的 情况 。 


最 后 的 判断 是 raises()， 以 一 个 函数 为 参数 ， 并 期 望 抛 出 错误 情况 。 








要 测试 异步 方式 发 生 事件 ， 使 用 返回 值 无 法 正常 工作 。 在 这 种 情况 
下 ， 测 试 必 须 等 竺 动作 完成 。 可 以 通过 用 setTimeoutO 设 置 一 个 超时 来 实 
现 ， 当 设 定 的 时 间 到 达 后 再 运行 。 或 者 可 以 用 回调 如 Ajax 加 载 或 其 他 事 
件 来 实现 。 


Selenium 


BIA QUnit VE Wl JavaScripttthy, {Awe 
Selenium Chttp://seleniumhg.org/) 采用 了 不 同 的 方法 。Selenium 通 过 模 
拟 用 户 可 能 会 采取 的 行为 测试 用 户 界 面 。 一 个 Selenium 测 试 包括 一 些 浏 
史 莫 中 的 运行 步 又 ， 例 如 加 载 一 个 页 面 、 点 击 一 个 特定 的 元 系 、 输 入 文 
字 到 一 个 文本 区 每 。 这 些 行为 夹杂 着 判断 ， 验 证 要 测试 的 DOM 状 态 或 
其 他 东西 。 其 中 可 能 包括 对 元 素 或 文本 是 否 存 在 的 测试 。 





当 Selenium 测 试 运行 时 ， 实 际 上 将 局 动 一 个 浏览 左 ， 并 用 或 多 或 少 
与 用 户 操 作 相 同 的 方式 运行 它 。 因 此 可 以 通过 浏览 器 监视 该 测试 的 交 
互 。 甚 至 可 以 在 测试 运行 的 同时 手动 与 浏览 器 交互 (虽然 这 可 能 不 是 一 
SEER) © 


Selenium 由 几 个 大 多 独立 的 部 分 组 成 。 其 一 是 作为 Firefox 浏 览 器 插 
件 实 现 的 IDE。 另 一 个 是 Selenium RC 服务 器 seleniumrc， 它 是 一 个 可 用 
于 在 不 同 的 浏览 器 上 自动 运行 测试 的 Java 服 务 器 。 


Firefox 的 Selenium IDE 持 件 是 开 太 人员 最 好 的 朋友 。 它 允许 构建 下 
接 在 浏览 右 中 运行 的 测试 。IDE 可 以 记录 用 户 的 操作 ， 并 稍 后 作为 一 个 
测试 回放 。 它 还 可 以 让 你 按 步调 试 一 个 测试 (每 次 一 行 )， 这 对 在 测试 
中 发 现时 序 问题 非常 有 用 。 


注意 : 在 默认 情况 下 ， 录 制 动 作 时 Selenium IDE 将 使 用 各 种 HIML 
元 素 的 ID。 在 程序 员 没 有 明确 分 配 ID 的 情况 下 ， 一 些 框架 将 会 在 元 素 
创建 时 顺序 地 分 配 ID。 这 些 ID 每 次 运行 都 不 相同 ， 所 以 请 使 用 一 些 其 


他 的 方法 标识 感 兴趣 的 元 素 。 


Selenium IDE 将 测试 输出 为 HIML 文 件 ， 可 以 在 Firefox 的 IDE 上 自身 中 
运行 。 此 外 ， 这 些 HITML 文 件 可 以 作为 批 处 理 任 务 在 Selenium RC 组 件 中 
运行 。Selenium RC 服务 器 也 允许 对 运行 于 任意 浏览 器 上 的 HTML 进 行 测 
试 ， 因 此 可 以 在 下 、Chrome、Opera 或 Safari 上 运行 这 些 测试 。Selenium 
RC 服务 器 也 可 以 由 传统 测试 通过 像 phpUnit 或 jUnit 一 样 运行 的 测试 进行 
控制 。 








Selenium IDE 在 开发 中 记录 Web 宏 方面 也 很 有 用 。 例 如， 如 果 正 在 
测试 Web 应 用 中 的 一 个 向 导 ， 在 要 调试 的 界面 之 前 会 显示 四 个 或 五 个 界 
面 ， 可 以 使 用 IDE 来 创建 Selenium 脚 本 ， 然 后 把 它 作为 一 个 宏 调用 ， 从 
而 可 以 自动 地 找到 正在 测试 的 点 。 





注意 : 如 果 一 个 测试 在 单 步 模式 下 运行 时 起 作用 ， 但 工作 不 正常 ， 
它 可 能 需要 几 个 暂停 语句 让 浏览 器 赶 上 来 ， 或 者 一 些 waitFor…… 语 句 更 


好 ， 这 将 使 测试 和 浏览 器 同步 。 


~ 





Selenium 中 有 三 种 方式 来 运行 测试 ， 通 过 Selenium IDE. H 
Selenium RC 的 测试 工具 以 及 用 一 种 编程 语言 。IDE 在 交互 环境 中 容易 使 


用 ， 但 只 在 Firefox 中 有 用 。 测 试 工具 接受 HIML 格 式 的 输入 测试 ， 它 可 
以 在 IDE 中 创建 。 最 后 ， 可 以 在 一 个 单元 测试 框架 中 如 phpUnit， 用 编程 
语言 编写 测试 。 使 用 基于 测试 工具 或 编程 语言 的 测试 套件 允许 对 浏览 器 
进行 全 套 测 试 ， 并 能 提供 报告 和 其 他 功能 。 这 个 过 程 也 可 以 整合 到 持续 
集成 工具 ， 以 及 用 xUnit 框 架 编写 的 任何 其 他 测试 中 。 








一 个 Selenium 测 试 由 一 个 包含 一 个 表 的 HTML 文 件 构 建 而 成 ， 测 试 
中 的 每 一 步 是 表 中 的 一 行 。 该 行 包括 三 列 : 要 运行 的 命令 、 要 操作 的 元 
素 和 在 条 些 情 况 下 使 用 的 参数 选项 。 例 如 ， 第 三 列 包含 测试 表单 时 要 输 
入 到 一 个 input 元 素 中 的 文本 。 


与 QUnit 测 试 不 同 ，Selenium 测 试 都 是 关于 用 户 界 面 的 测试 。 
此 ，Selenium 是 比 单元 测试 更 集成 的 测试 。 为 了 用 Selenium 测 试 例 3-3， 
需要 与 QUnit 不 同 的 方法 。QUnit 测 试 直接 调用 处 理 函 数 ， 而 Selenium 测 


试点 击 按钮 ， 并 等 待 过 div 二 显示 。 


例 3-5 完 成 该 测试 。 表 中 的 每 一 行 作 为 测试 的 一 部 分 执行 一 个 操 
作 。 第 一 行 打 开 的 网 页 进行 测试 ， 然 后 第 二 行 单 击 按钮 (通过 元 系 的 ID 


Wa) 。 然 后 ， 测 试 等 待 页 面 显 示 二 div 之 ， 在 这 种 情况 下 ， 通 过 XPath 
进行 识别 。 


此 测试 对 上 面 QUnit 测 试 的 同一 个 简单 脚本 进行 测试 。 但 不 是 测试 
函数 本 映 ， 而 是 用 与 人 工 测试 员 类 似 的 方法 测试 用 户 界 面 。 它 打开 页 





面 ， 
后 ， 


单 击 click_me 按 钮 。 然 后 等 竺 div 元素 target_div 在 DOM 中 出 现 。 然 
它 宣 布 单 词 "First" 出 现在 该 页 面 中 。 


例 3-5: 简单 Selenium 测 试 





<?xml version="1.0"encoding="UTF-8"?> 

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" 
"http: //www.w3.org/TR/xhtml11/DTD/xhtmll-strict.dtd"> 

<html xml: lang="en"lang="en"> 

<head profile-"http://selenium-ide.openqa.org/profiles/test- 


case' 





























> 





<meta http-equiv="Content-Type"content="text/html; charset-UTF- 


8"/— 











<link rel="selenium.base"href="http://www.example.com/"/> 
<title>New Test</title> 
</head> 





人 
E 
Ó 

©; 
< 

V 


AAAAAAAAAAAAAAAAAAAAAAA 





table cellpadding="1"cellspacing="1"border="1"> 
thead> 

tr><td rowspan="1"colspan="3">New Test</td></tr> 
/thead><tbody> 

tr> 

td>open</td> 
td>/examples/simple.html</td> 
td></td> 

/tr> 

tr> 

td>click</td> 

td>click me</td> 

td></td> 

/tr> 

EES 
td>waitForElementPresent</td> 
td>//div[@id='target_div']</td> 
td></td> 

JEES 

tr> 

td>assertTextPresent </td> 
td>First</td> 

td></td> 














</tr> 
«!--More tests--> 
</tbody></table> 





</body> 
</html> 





Selenium 4 


Selenium 拥 有 丰富 的 命令 语言 一 一 
Selenese (http://seleniumhg.org/docs/04_selenese_commands.htm) ， 人 允许 
程序 员 创 建 测试 。 用 户 在 浏览 器 中 进行 的 几乎 任何 动作 都 可 以 用 
Selenium 命 令 实现 。 可 以 通过 创建 一 个 包含 一 系列 动作 和 测试 的 脚本 来 
创建 Selenium 测 试 。 


警告 : 从 桌面 拖 动 一 个 文件 到 浏览 器 ( 见 第 6 章 的 “ 拖 螺 ”) ， 不 


能 用 Selenium 实 现 ， 也 不 能 简单 地 用 qdqUnit 测 试 。 


有 极 少数 例外 ，Selenium 命 令 将 DOM 中 的 要 操作 的 元 素 的 位 置 作为 
一 个 参数 。 该 位 置 可 以 在 几 种 方法 中 的 一 个 进行 指定 ， 包 括 元 素 ID、 元 
素 的 名 称 、XPATH、CSS 类 、DOM 内 部 的 JavaScript 调 用 和 链接 文本 。 


第 3 章 的 “Selenium 位 置 选项 ”对 这 些 选项 进行 了 说 明 。 


警告 : 在 ExtJS 中 使 用 元 素 ID 没 有 效果 ， 因 为 ExtjS 每 次 分 配给 元 素 
的 ID 会 有 变化 。 请 使 用 CSS 类 或 者 HTML 元 素 的 其 他 属性 。 为 表示 按 
钮 ， 使 用 XPath 中 按钮 的 文本 ， 像 //button[text0='Save] 通 常 很 有 用 ， 也 
可 以 选择 使 用 属性 如 : //img[@stc='img.png']。 


注意 : Selenium 基 本 命令 不 包括 任何 条 件 或 循环 的 能 力 。 一 个 
Selenium HTML 文 件 顺序 地 从 上 到 下 运行 ， 当 断言 失败 或 最 后 一 个 命令 
执行 时 结束 。 如 果 需 要 流程 控制 ， 请 使 用 goto_sel_idqejs 插 件 

(http:/ /51elliot.blogspot.com.2008/02/selenium-ide-goto.html) o 


这 个 插件 对 查找 内 存 泄 漏 或 其 他 问题 很 有 用 ， 这 些 问 题 可 能 会 出 现 
在 用 户 长 时 间 运 行 的 应 用 程序 中 。 要 摆脱 内 存 泄 漏 ，JavaScript 仍 然 有 很 
长 的 路 要 走 ， 当 页 面 重 载 频繁 ，JavaSctipt 和 DOM 状 态 重 置 时 内 存 泄 露 


不 是 一 个 问题 。 


Selenium 中 大 量 的 命令 可 以 用 来 构建 测试 。Selenium IDE 包 含 一 个 
命令 的 参考 ， 一 旦 学 会 一 些 基 本 知识 ， 就 可 以 很 容易 地 对 于 任何 给 定 的 
情况 找 出 正确 的 命令 。 表 3-1 显 示 了 一 坚 季 见 的 Selenium 命 令 。 它 们 往往 
在 两 个 基本 组 中 : 动作 和 断言。 动作 包括 click、type、dblclick、 
keydown、keyup 等 。 断 言 提 供 实 际 测试 ， 能 让 Selenium 找 出 用 户 的 行为 
如 何 影响 页 面 。 断 言 可 以 暂停 脚本 ， 但 不 会 产生 页 面 变 化 。 














表 3-1: 选 定 的 Selenium 命 令 


命令 目标 动作 

open 要 打开 的 Web 页 面 打开 一 个 Web 页 面 
dblclick 要 双击 的 对 象 双击 一 个 元 素 

click 要 单 击 的 元 素 单 击 一 个 元 素 
mouseOver 鼠标 移动 处 的 元 素 & hil — 4 mouseOver ft fl 
mouseUp 鼠标 按键 弹 起 处 的 元 素 复制 一 个 mouseUp 事 人 
mouseDown 鼠标 按键 按 下 处 的 元 素 复制 一 个 mouseDown 事 付 
type 用 XPath 或 其 他 选择 器 选择 的 元 素 ， ”模拟 文字 输入 


第 三 列 是 要 输入 的 文本 


X 3-1; 选 定 的 Selenium 命 令 〈 续 ) 


命令 目标 动作 
windowMaximized 最 大 化 当前 窗口 
refresh We. ATR 
JavaScript 状 态 
dragAndDrop 到 拖 动 元 素 的 偏 移 ， 选 择 器 是 要 拖 忠 一 个 元 素 
拖 动 的 元 素 。 


Selenium 位 置 选 项 


Selenium 提 供 了 6 种 定位 网 页 元 素 的 方式 。 选 择 正确 的 定位 方式 会 简 


化 开发 测试 代码 的 复杂 度 : 


ID 


提供 一 个 HIML ID: 





id 





Name 


提供 一 个 元 素 名 (可 用 于 表单 输入 ) : 





name-username 





XPath 


用 XPath 找到 一 个 元 素 : 











//form[@id='loginForm']/input [1] 





CSS 


通过 CSS Selector 找 到 一 个 元 素 ， 用 户 比较 熟悉 的 过 程 是 


jQuery,Selenium 中 的 CSS Selectoft 引 营 比 jQuery 的 更 有 限 : 





css-div.x-btn-text 





Document 


用 DOM 找 到 一 个 元 素 : 




















dom-document.getElementById('loginForm') 





Link text 


通过 href 属 性 中 的 文本 找到 元 素 (可 用 于 HTML 链接 ) 





link='Continue' 





注意 : 在 ExtjS 或 任何 其 他 自 定义 的 部 件 中 ， 如 果 一 个 click 事 件 按 预 
期 工作 ， 尝 试 使 用 mouseDown。 例 如 ， 要 在 表格 中 选择 一 行 ， 用 
mouseDown 事 件 ， 而 不 是 click 事 件 。 当 用 鼠标 单 击 时 ， 浏 览 器 发 送 三 个 
事件 : mouseDown、mouseUp 和 click 事 件 。 用 户 界面 中 的 不 同 元 素 可 能 
响应 其 中 任何 一 个 。 


Selenium 中 的 动作 都 有 两 种 形式 : 一 种 简单 形式 和 一 种 将 等 待 页 面 


重新 加 载 的 形式 。 点 击 命令 的 等 竺 形式 ， 例 如 clickAndwWwait。 


经 过 一 系列 动作 ， 有 必要 验证 该 应 用 实际 上 执行 了 正确 的 动作 。 
Selenium 中 的 测试 大 多 数 对 元 素 存在 与 否 进 行 测试 。 例 如 ， 测 试问 一 个 
ExtJS 表 格 中 添加 一 个 新 元 素 ， 测 试 脚本 会 做 这 样 的 事情 : 





1. 点 击 添加 按钮 。 
2. 填 写 表 格 ， 提 供 默 认 值 。 
3. 回 服务 占 提 交 新 的 记录 。 


4. 等 符 服 务 器 的 啊 应 ， 并 验证 该 文本 在 正确 的 表格 中 。 





所 有 的 断言 有 三 种 基本 形式 ， 基本 形式 、 校 验 形式 和 WaitFor 形 
式 。 基 本 的 命令 类 似 于 assertElementPresent， 并 且 当 断言 失败 时 将 停止 
测试 。verifyElementPresent 将 检查 元 素 是 否 存 在 ， 如 果 不 存在 则 继续 测 
试 。 如 果 有 多 个 测试 ， 又 不 希望 它们 在 一 次 失败 后 停止 ， 这 将 非常 有 
用 。 如 果 一 个 动作 应 该 有 一 个 延迟 的 结果 ， 则 用 
waitForElementPresent， 这 将 暂停 测试 脚本 ， 直 到 条 件 满足 或 到 达 测 试 


时 间 。 小 结 : 








assert... 





检查 茶 事 是 否 为 真 ， 如 果 不 为 真 则 停止 。 








verify... 





检查 东 事 是 人 否 为 芮 ， 如 采 不 为 真 则 继续 。 








waitFor.. 


等 待 页 面 上 的 某 事 发 生 〈 往 往 用 Ajax) 。 


用 Selenium IDE 构 建 测试 


Selenium 测 试 可 以 手工 构建 ， 但 自动 往往 更 容易 。Selenium IDE 的 
Firefox 插 件 可 以 在 浏览 器 中 记录 动作 ， 并 把 它们 保存 为 测试 。 程 序 员 仍 
然 必须 加 入 断言 、 手 动 等 待命 令 ， 并 可 能 要 调整 已 产生 的 脚本 。 测 试 被 
保存 为 一 个 HTML 文档 ， 可 以 在 版 本 控制 内 部 进行 检查 并 从 IDE 和 自动 
测试 工具 中 运行 














IDE 是 一 个 在 Selenium 中 测试 选项 的 不 错 方式 。 它 也 可 以 创建 测试 
脚本 并 直接 从 IDE 中 运行 它们 。Selenium IDE 还 允许 控制 执行 脚本 的 快 
慢 程 度 ， 并 通过 它们 进行 单 步调 试 。 左 侧面 板 〈 在 图 3-1 被 隐藏 了 ) 显 
示 了 一 个 所 有 已 定义 测试 用 例 的 列表 。 它 们 都 可 以 通过 工具 栏 上 的 第 一 
个 按钮 运行 (速度 控制 的 左 侧 ) 。 右 边 的 下 一 个 按钮 执行 一 个 测试 。 
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图 3-1 Selenium IDE 


Selenium IDE 底 部 的 面板 是 功能 选项 卡 《〈 可 以 用 插件 添加 更 多 ) 。 
最 左边 的 选项 卡 功 能 是 正在 运行 测试 的 日 志 。 第 二 个 选项 卡 是 参考 面 
板 。 当 从 中 间 面 板 的 “表单 ”选择 一 个 命令 时 ， 此 选项 卡 将 显示 选 定 命 令 
的 信息 ， 包 括 需 要 什么 样 的 参数 。 








目 动 运行 测试 


可 以 用 一 个 流行 的 测试 套件 (JUnit 或 PHPUnit〉 来 运行 Selenium 测 
试 ， 让 测试 跨 多 个 浏览 器 和 平台 运行 。 如 果 正 在 定期 运行 一 个 单元 测 
试 ，S$elenium 测 试 可 以 从 正常 测试 中 《〈 见 例 3-6) 运 


运行 


注意 : 大 部 分 或 全 部 修改 这 里 描述 的 PHPUnit 后 ， 它 在 所 有 其 他 语 
言 类 似 的 测试 套件 中 可 用 。 
这 些 测试 将 像 任 何其 他 的 测试 一 样 在 测试 环境 运行 。 每 个 HTML 文 


件 将 作为 测试 在 测试 套件 中 运行 (细节 可 能 取决 于 所 使 用 的 测试 工 
H) 。 测 试 工 具 将 顺序 地 以 与 IDE 中 类 似 的 方式 运行 每 个 HTML 文 件 。 





要 在 PHPUnit 中 运行 测试 ， 需 要 设计 一 个 或 多 个 测试 机 来 运行 浏览 
器 。 每 个 测试 机 需要 运行 一 个 Selenium RC 的 程序 副本 ， 并 安装 有 浏览 
器 。seleniumrc 的 二 进 制 文件 是 一 个 "jar" 的 java 文 件 ， 因 此 能 够 在 


Windows、Linux 或 Mac 操 作 系 统 上 运行 。 


当 在 PHPUnit 中 运行 测试 时 ， 测 试 类 
PHPUnit Extensions SeleniumTestCase 将 联系 seleniumrc 程 序 ， 并 要 求 它 
启动 一 个 浏览 器 实例 ， 然 后 在 一 个 REST 接 口上 发 送 命令 旨 





如 果 在 "$browsers" 的 静态 成 员 中 或 通过 "phpunit.xml" 文 件 《 见 例 3- 


7) 列 出 了 多 个 浏览 器 ，"PHPUnit Extensions_SeleniumTestCase" 类 将 顺 
序 地 运行 ， 为 每 个 浏览 右 汕 试 运行 每 个 测试 。 例 如 ， 在 例 3-6 中 ， 将 在 
Safari、Firefox、Chrome 和 Internet Explorer 上 运行 测试 。 在 phpunit.xml 
文件 中 列 出 浏览 器 选项 更 好 ， 因 为 可 以 创建 多 个 文件 ， 以 帮助 实现 不 改 
变 测 试 源 代 码 即 可 修改 测试 选项 。 





下 面 的 测试 从 文件 seleneseTest.html 运 行 一 个 Selenium 测 试 。 但 是 ， 
通过 设置 测试 类 的 $seleneseDirectory 属 性 为 该 文件 的 路 径 ， 可 以 让 它 自 
动 运 行 Selenium HTML 测试 文 件 的 整个 路 径 。 














public static$seleneseDirectory-'/path/to/files'; 





例 3-6: phpUnit 中 运行 Selenium 





<?php 

require once'PHPUnit/Extensions/SeleniumTestCase.php'; 
class WebTest extends PHPUnit Extensions SeleniumTestCase 
{ 
protectedScaptureScreenshotOnFailure=TRUE; 
protectedSscreenshotPath='/var/www/localhost/htdocs/screenshots'; 
protectedSscreenshotUrl='http://localhost/screenshots'; 

public static$browsers-array( 

array ( 

"name'=>'Safari on MacOS X', 

"browser'=>'*safari', 

"host'=>'mac.testbox', 

‘port '=>4444, 

"timeout '=>30000 

) ， 

array ( 

"name'=>'Firefox on Windows', 

"browser'=>'*firefox', 

"host'=>'windows.testbox', 

"port '=>4444, 




































































"timeout '=>30000 

) ， 

array ( 

"name'=>'Chrome on Windows XP', 
"browser'=>'*googlechrome', 
"host'=>'windows.testbox', 
‘port '=>4444, 

"timeout '=>30000 

) ， 

array ( 

"name'=>'Internet Explorer on Windows XP', 
"browser'=>'*iexplore', 
"host'=>'windows.testbox', 
‘port '=>4444, 

"timeout '=>30000 






































) 

) 

protected function setUp() 

{ 
Sthis--'setBrowserUrl('http://www.example.com/'); 
} 

public function testSeleniumFile() 

{ 
Sthis->open('http://www.example.com/'); 
Sthis->runSelenese('seleneseTest.html'); 
} 

} 
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例 3-7: phpunit.xml 


pM———————————————————————— | 


<phpunit stopOnFailure="true" 
verbose="true" 
strict="true"> 

<php> 

</php> 

<selenium> 

<browser name="Firefox 
browser="*firefox" 
host="192.168.0.10" 
port="4444" 
timeout="30000"/> 
<browser name="Chrome" 
browser="*chrome" 
host="192.168.0.10" 























port="4444" 
timeout="30000"/> 
<!--Fi fin i as-- > 




















</selenium> 

<testsuites> 

<testsuite name="Selenium"> 
<file>/path/to/MyTest.php</file> 








</testsuite> 
</testsuites> 
</phpunit> 

















相对 于 Selenium RC 的 所 有 优势 ， 它 有 一 个 主要 的 缺点 : 每 次 只 能 
运行 一 个 测试 。 因 此 ， 如 果 用 一 个 大 的 测试 套件 和 大 量 不 同 的 浏览 器 运 
行 该 测试 ， 完 整 的 测试 运行 可 能 花费 好 几 个 小 时 。Selenium Grid 为 此 提 
供 了 解决 方案 ， 人 允许 在 一 组 机 器 上 并 行 运行 大 量 测试 。 可 以 在 
http://selenium-grid.seleniumhq.org/ 找 到 Selenium Grid 软件 的 例子 和 文 
档 。 








如 果 不 想 建立 测试 场 ， 网 上 有 "cloud selenium farms" 可 用 。 此 外 ， 
可 以 在 亚马逊 的 EC2 云 服务 中 运行 Selenium。 对 于 偶尔 使 用 的 用 户 或 没 
有 资源 用 于 建立 和 维护 一 个 本 地 selenium 测 试 场 的 初学 者 ， 这 是 非常 有 
用 的 。 对 于 查看 应 用 将 如 何在 远程 网 络 中 执行 也 非常 有 帮助 。 


Selenese 命 令 编 程 接口 


Selenium 测 试 套件 可 以 从 一 个 HTML 文件 或 直接 从 单元 测试 代码 中 
运行 一 个 测试 。Selenium RC 服务 器 也 有 一 个 API 可 以 在 几 种 语言 中 通过 
单元 测试 代码 进行 调用 ， 可 以 写 一 个 PHP、Ruby、Python、PERL、 





JAVA 及 C#/.NET 的 Selenium 测 试 。 可 以 通过 Selenium IDE 或 手动 创建 代 
码 的 测试 用 例 。Selenium IDE 将 生成 一 个 测试 框架 。 要 做 到 这 一 点 ， 在 
IDE 中 记录 测试 ， 然 后 为 运行 测试 的 语言 选择 输出 选项 ， 则 测试 将 转换 


成 该 语言 。 


注意 : 要 在 多 个 浏览 器 上 运行 Selenium， 需 要 设置 Selenium 服 务 器 。 


见 第 3 章 的 “Selenium RC 及 一 个 测试 场 ”。 





直接 从 单元 测试 运行 Selenium， 笨 主语 言 作为 语言 拥有 全 部 力量 ， 
尤其 是 它 的 流程 控制 ， 而 HTML 样 式 测 试 则 有 限 得 多 。 通 过 在 服务 器 新 
编程 语言 使 用 的 API， 使 得 为 编号 web 脚 本 创建 一 个 非常 丰富 的 环境 成 
为 可 能 ， 当 然 ， 必 须 访问 服务 器 并 的 库 检 查 数 据 库 中 的 数据 或 者 访问 
Web 服 务 ， 可 以 构建 一 个 测试 ， 在 浏览 器 中 执行 一 些 动 作 ， 然 后 在 数据 
库 或 日 志文 件 中 对 结果 进行 检查 。 





使 用 服务 器 端 测试 的 男 一 个 好 处 是 ， 如 果 正 在 使 用 任何 形式 的 持续 
整合 如 CruiseControl 或 phpUnderControl,Selenium 测 试 就 像 一 个 测试 系 





统 ， 只 是 可 以 做 更 多 测试 ， 而 且 不 论 团队 正在 使 用 的 是 什么 语言 都 能 测 
试 。 在 一 个 使 用 了 测试 框架 的 团队 中 ， 这 将 充分 利用 团队 的 现 有 经 验 。 





例 3-8 是 用 PHP 在 PHPUnit 测 试 框 架 下 写 的 一 个 很 简单 的 Selenium 测 
试 的 例子 。 它 首先 打开 一 个 页 面 ， 等 待 页面 载 入 完毕 后 ， 判 断 页 面 标题 
是 不 是 "Hello World"， 然 后 它 会 点 击 "Click Me" 按钮 。 如 采 标 题 不 
是 "Hello World" 或 者 没有 "Click Me" 按 钮 ， 测 试 就 会 返回 失败 。 


例 3-8: 测试 Hello World 





<?php 

require once 'PHPUnit/Extensions/SeleniumTestCase.php' 
class WebTest extends PHPUnit Extensions SeleniumTestCase 
{ 


functiontestTitle() 

















this->open('http://www.example.com'); 
this->assertTitle('Hello World'); 
this->click("//button[text()='Click Me']"); 
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Selenese 命 令 一 般 包括 动作 、 断 言 和 碍 询 。 动 作 通 冲 反映 Selenium 
动作 的 基本 形式 : click、mouseOver、mouseDown、type 等 。 各 种 出 现 
在 Selenium IDE 中 的 延迟 形式 是 不 存在 的 ， 但 可 以 很 容易 地 通过 使 用 
sleep 函 数 的 循环 进行 模拟 。 





许多 在 HTML Selenese 测 试 工具 中 出 现 的 实用 方法 在 服务 器 端 
Selenese 接 口中 并 不 存在 ， 不 包括 WaitForElementPresent 〈 见 例 3-9) 或 





WaitForElementNotPresent 方 法 在 内 ， 但 可 以 很 容易 地 通过 为 测试 创建 自 
定义 其 类 进行 添加 。 


例 3-9: WaitForElementPresent 














function waitForElementPresent ($el, $timeout=60) 
{ 

While ($timeout) 

{ 

if (Sthis->isElementPresent ($el)) 

{ 

return true; 

} 
Stimeout-=1; 
sleep (1); 

} 

Sthis-> fail 
} 























"Element$el not found"); 





一 








查询 允许 程序 员 确 定 行 动 发 生 后 页 面 的 状态 。 这 些 得 询 允 许 程序 员 
找 出 页 面 上 是 否 存在 一 个 元 素 或 一 段 文字 ， 或 了 解 页 面 的 当前 状态 。 


Selenese API 还 提供 了 许多 方法 ， 从 一 个 单元 测试 环境 中 的 HTML 文 
档 中 获取 数据 。 为 了 测试 页 面 中 是 人 否 存在 一 个 给 定 文本 ， 请 使 用 "$this- 
>jsTextPresent0)" 方 法 ， 这 对 检查 一 个 文本 是 否 存在 往往 非常 有 用 。 要 
找 出 一 个 元 素 是 否 存在 ， 请 使 用 $this->isElementPresent() 方 法 。 要 真正 
从 DOM 中 获取 文本 ， 请 使 用 $this->getText() 方 法 。 它 对 Selenese 支 持 的 
任何 形式 的 选择 器 进行 处 理 ， 并 返回 该 元 素 的 文本 。 如 果 该 元 素 不 存 
在 ， 该 方法 将 抛 出 一 个 异常 。 











XPath 选择 堪 匹 配 页 面 上 的 多 个 元 素 。 它 通 名 会 返回 匹配 的 第 一 个 
元 系 。 要 知道 有 多 少 个 元 系 匹 配 ， 请 使 用 $this->getX pathCount() 77 
法 。 








当 在 PHP 中 建立 测试 时 ， 对 浏览 器 中 的 接口 与 运行 在 PHP 中 的 测试 
本 身 之 间 的 测试 动作 进行 同步 可 能 是 一 个 挑战 。 这 很 直观 ， 写 一 个 进行 
了 某 些 操作 的 测试 ， 例 如 单 击 一 个 元 素 ， 然 后 立即 移动 鼠标 到 另 一 个 元 
素 上 。 这 不 可 避免 地 会 失败 ， 因 为 JavaScript 将 需要 花费 一 段 时 间 (也 许 
是 0.1s) ， 以 创建 一 个 用 户 界 面 或 等 待 数据 从 服务 器 加 载 。 有 两 种 方式 
来 处 理 这 个 问题 。 





简单 的 方法 是 在 PHP 代 码 中 加 入 延 时 。 一 些 放 在 正确 位 置 的 sleep() 
命令 ， 可 以 正常 地 测试 函数 。 然 而 ， 可 能 会 导致 必须 花费 较 长 的 时 间 运 
行 测试 。 为 了 加 快 测试 ， 使 用 如 waitForElementPresent() 这 样 的 方法 在 测 
试 之 间 延 时 1/10s， 可 以 让 脚本 运行 速度 更 快 ， 只 要 DOM 中 有 一 种 方法 
能 判断 浏览 器 为 下 一 步 测试 做 好 准备 。 








二 种 方式 是 在 Selenese 接 口中 使 用 $this->getEval(0) 方 法 评估 上 自 定 
义 JavaScript。 回 该 方法 传递 一 个 字符 串 ， 其 中 包含 要 执行 的 
JavaScript。 当 通过 getEval() 调 用 JavaScript 时 ， 它 将 运行 在 测试 工具 窗口 
的 窗口 背景 下 ， 而 不 是 测试 窗口 中 。 因 此 ， 全 局 变量 必须 以 全 局 窗口 对 
象 为 前 级 (通常 不 要 求 ) 。 











在 例 3-10 中 ，Selenium 在 JavaScript 中 执行 getEvalO0 获 取 全 局 变量 


session id. 


例 3-10: 用 Selenese 运 行 JavaScript 








$session id-$this--"getEval('window.session id"): 





注意 : 也 可 以 使 用 Selenium RC 设 置 手动 测试 ， 通 过 让 脚本 打开 该 页 
面 ， 并 执行 所 有 步骤 ， 直 到 到 达 需 要 测试 的 点 。 当 到 达 终 点 时 ， 它 应 该 
长 时 间 的 暂停 ， 因 为 测试 结束 时 浏览 器 将 关闭 。 在 测试 停止 的 点 ， 可 以 
由 一 个 人 接管 浏览 器 ， 并 执行 任何 可 能 需要 的 手动 操作 。 当 开发 一 个 多 


步 向 导 或 类 似 的 用 户 界面 时 ， 这 往往 是 有 益 的 。 


在 Selenium 中 运行 QUnit 


B 


Selenium 能 很 好 地 运行 QUnit 测 试 。 要 实现 这 一 点 ， 只 需要 
Selenium 中 加 载 QUnit 页 面 并 运行 测试 。 也 可 以 选择 只 通过 传递 参数 到 
URL 字 符 串 运行 测试 的 一 个 子 集 。 通 过 整合 Selenium 与 QUnit， 可 以 把 
QUnit 中 的 浏览 器 测试 结果 导出 到 持续 整合 的 测试 工具 中 。 


Selenium 只 打开 QUnit 的 URL， 然 后 退 到 后 台 ， 等 待 测试 完成 。 为 
了 让 测试 工具 知道 测试 是 否 通 过 或 失败 ，QUnit 提 供 了 一 个 简单 的 微 格 
式 〈 见 例 3-12) ， 显 示 运 行 了 多 少 测试 ， 有 多 少 通过 或 失败 。 然 后 ， 单 
元 测试 可 以 通过 XPath 选择 器 查看 此 数据 ， 并 确保 所 有 测试 通 








在 例 3-11 中 ，PHP 程 序 打 开本 章 开 头 显示 的 QUnit 测 试 ， 然 后 等 待 测 
试 运行 。 当 测试 完成 后 ，qunitrtestresult 元 素 将 插入 到 DOM 中 。 在 这 
点 上 ，Selenium 可 以 找到 运行 测试 的 数量 以 及 有 多 少 测试 通过 或 失败 。 
例 3-13 展 示 了 用 PHP 代 码 从 Selenium 中 提取 QUnit 返 回 值 的 方法 。 


例 3-11: 运行 QUnit 的 Selenium 测 试 





<?php 

require once 'PHPUnit/Extensions/SeleniumTestCase.php'; 
class WebTest extends PHPUnit Extensions SeleniumTestCase 
{ 
function testQUnit () 

{ 

// 这 里 在 QUnit 测 试 中 添加 你 的 HTML 文 件 的 URL 






















































































Sthis--'open('http://host.com/simple.html'); 

Sthis->waitForElementPresent ("//p[@id='qunit-testresult']"); 

SfailCount=Sthis->getText ("//p[@id='gqunit- 
testresult']/span[@class='failed']"); 

SpassCount=Sthis->getText ("//p[@id='qunit- 
testresult']/span[@class='passed']"); 

StotalCount=S$this->getText ("//p[@id='qunit- 
testresult']/span[@class='total']"); 























$this--"assertEquals ($passCount, StotalCount, 

"Check that all tests passed$passCount ofStotalCount passed"); 

Sthis->assertEquals("0", SfailCount, 
"Checking result of QUnit testsSfailCount/StotalCount tests 

failed"); 
} 

function waitForElementPresent (Selement, Stimeout=60) 

{ 

Stime=0; 

while (!Sthis->isElementPresent (Selement) ) 

{ 

Stimet+; 

if (Stime>Stimeout) 

{ 

throw New Exception("Timeout: Selement not found!"); 

} 

sleep (1); 

} 

} 

} 



























































例 3-12: QUnit 结 果 的 微 格式 





<p id="gunit-testresult"class="result"> 
Tests completed in 221 milliseconds.<br/> 
<span class="passed">1</span>tests of 
<span class="total">2</span>passed, 
<span class="failed">1</span>failed. 
</p> 





























例 3-13: 从 QUnit 获 取 数 据 的 PHP 代 码 





<?php 
SfailCount=Sthis->getText ("//p[@id='gqunit- 











testresult']/span[@class='failed']"); 
SpassCount=Sthis->getText ("//p[Gid-'qunit- 























testresult']/span[@class='passed']"); 
StotalCount=S$this->getText ("//p[@id='qunit- 
testresult']/span[@class='total']"); 


Sthis->assertEquals(S$passCount, StotalCount, 

"Check that all tests passedSpassCount ofStotalCount passed"); 

Sthis->assertEquals("0", SfailCount, 
"Checking result of QUnit testsSfailCount/S$totalCount tests 

failed"); 


ee | 












































Selenium RC 及 一 个 测试 场 








重要 的 是 要 确保 应 用 不 只 在 一 个 浏览 器 上 运行 良好 ， 而 是 在 多 数 的 
浏览 器 和 平台 上 运行 良好 。 在 大 多 数 情况 下 ， 可 以 假设 应 用 可 能 会 
在 Windows XP. Windows Vista, Windows 7, Mac OS 六 以 及 Linux 平 台 
> 
Opera 浏 览 器 ， 而 且 各 浏览 器 多 个 不 同 的 版 本 。 





在 这 些 不 同 的 浏览 器 中 ，JavaScript 和 各 种 接口 的 实现 是 类 似 的 ， 并 
使 用 了 一 个 与 jQuery 类 似 的 框 滁 消除 一 些 差 异 ， 但 浏览 器 仍然 不 完全 相 
同 。 因 此 ， 一 段 在 Firefox 中 行 之 有 效 的 代码 可 能 会 在 Chrome 或 Safari 中 
突然 骨 演 。 当 然 ， 代 码 可 能 将 在 浏览 器 的 一 个 版 本 中 有 效 ， 但 在 较 旧 的 
或 较 新 的 版 本 中 没有 效果 。 因 此 ， 跨 多 种 浏览 器 测试 是 至 关 重 要 的 。 然 
而 ， 让 一 个 QA 团队 人 工 完成 它 可 能 是 期 望 过 高 的 ， 因 此 需要 自动 化 实 
现 。 








Selenium RC 使 得 用 机 器 网 络 测试 所 有 这 些 不 同 的 组 成 部 分 成 为 可 
能 。 每 个 测试 机 必须 安装 有 Java。 在 许多 情况 下 ，Java 将 默认 安装 ， 但 
如 果 不 是 ， 下 载 并 安装 它 。 然 后 从 http://seleniumhq.org/download/ 下 载 
Selenium RC 包 并 解压 。 在 每 个 服务 右上， 用 下 面 所 示 的 命令 局 动 
Selenium server jar。 如 果 一 人 台 机 器 是 测试 场 中 的 成 员 ， 让 Selenium 服 务 














器 随机 器 局 动 目 动 运行 可 能 是 一 个 好 主意 。 通 常情 况 下 ，Selenium 服 务 
虱 采 用 默认 安装 ， 它 提供 了 一 些 允 许 某 种 程度 自 定义 的 命令 行 选项 。 具 
体 来 说 ， 如 果 需 要 的 话 ， 可 以 用 端口 选项 改变 默认 的 4444 端 口 。 这 可 以 
用 来 在 一 台 服 务 器 上 运行 多 个 服务 器 实例 ， 以 便 同 时 在 多 个 浏览 器 上 测 
i. 





java-jar selenium-server.jar[-port 4444] 








注意 : 没有 必要 为 每 个 测试 服务 器 使 用 单独 的 一 台 机 器 。 任 何 常见 
的 虚拟 机 技术 都 能 处 理 得 很 好 。 一 台 有 足够 RAM 的 功能 强大 的 服务 器 应 


该 能 够 运行 一 个 小 型 的 实用 虚拟 测试 场 。 


如 琳 需 要 在 Android 或 OS 上 测试 应 用 ，Seleniuom 也 能 做 得 很 好 。 有 
一 个 Android 的 Selenium 驱 动 程序 
(http://code.google.com/p/selenium/wiki/AndroidDriver) ， 以 及 一 个 
iPhone 的 驱动 (http://code.google.com/p/selenium/wiki/IPhoneDriver) . 
请 注意 ， 为 了 运行 Phone 的 驱动 程序 ， 需 要 有 一 个 Mac 以 及 iPhone 的 开 
发 设置 。 由 于 iPhone store 中 没有 Selenium 了 驱动 程序 ， 需 要 会 用 提供 的 配 
置 文件 在 手机 上 安装 它 ， 或 者 使 用 Xcode 中 的 模拟 器 。 








第 4 革 ”本 地 存储 


Web 浏 览 器 给 JavaScript 提 供 了 一 个 民 好 的 环境 ， 人 允许 它 创 建 可 以 在 
浏览 器 上 运行 的 应 用 。 使 用 ExtJS 或 jQuery 可 以 构建 一 个 与 桌面 应 用 媲 
的 多 用 途 应 用 程序 ， 并 提供 与 桌面 应 用 一 样 简单 的 分 布 式 方法 。 然 而 ， 
浏览 器 在 提供 用 户 体 验方 面 ， 当 涉及 数据 存储 时 曾 是 一 片 空白 。 








从 历史 上 看 ， 浏 览 器 没有 通过 任何 方法 存储 数据 。 它 们 实际 上 是 最 
终 的 瘦 客 户 机 。 最 接近 的 可 能 是 HTTP cookie 机 制 ， 人 允许 在 每 个 HTTP 请 
求 中 附加 一 块 数据 。 然 而 ，cookie 遇 到 许多 问题 。 首 先 ， 每 个 cookie 随 
着 每 个 请 求 来 回 发 送 。 因 此 ， 浏 览 器 为 每 个 JavaScript 文 件 、 图 片 、Ajax 
请 求 等 发 送 cookie。 这 会 无 缘 无 故地 增加 大 量 的 带宽 使 用 。 其 次 ， 试 图 
创建 的 cookie 规 范 ， 使 不 同 的 子 域 之 间 可 以 共享 一 个 cookie。 如 果 一 家 
公司 有 app.test.com 和 images.test.com， 可 以 设置 一 个 cookie 对 二 者 都 可 
见 。 出 现 这 种 问题 的 原因 是 因为 在 美国 以 外 的 国家 ， 由 三 部 分 组 成 的 域 
名 成 为 普遍 现象 。 例 如 ， 可 以 在 co.il 主 机 中 设置 一 个 cookie， 人 允许 cookie 
渗透 到 以 色 列 的 几乎 所 有 主机 上 。 不 能 每 当 域名 中 包含 一 个 国家 的 后 绥 
时 ， 就 简单 地 请 求 一 个 由 三 部 分 组 成 的 域名 ， 因 为 一 些 国 家 如 加 拿 大 不 
遵循 相同 的 约定 。 














在 浏览 器 上 进行 本 地 存储 ， 可 能 成 为 速度 方面 的 一 大 优势 。 正 第 的 
Ajax 得 询 根 据 服 务 器 的 不 同 可 能 花费 半 秒 到 几 秒 的 时 间 。 然 而 ， 即 使 在 


最 好 的 情况 下 ， 也 可 能 相当 缓慢 。 从 我 在 特拉维夫 的 办 公 室 到 加 利 福 尼 
亚 的 一 个 服务 器 ， 一 个 简单 的 ICMP ping 花 费 的 平均 时 间 约 为 250ms。 在 
这 250ms 中 ， 有 很 大 一 部 分 可 能 是 由 于 基本 的 物理 限制 ， 数据 沿 着 导线 
传送 ， 速 度 仅 为 光速 的 一 部 分 。 因 此 ， 只 要 数据 必须 在 浏览 器 和 服务 锅 
之 间 往 返 ， 就 很 难 有 办 法 提高 访问 的 速度 。 








本 地 存储 选项 对 静态 的 或 大 多 是 静态 的 数据 是 一 个 非常 好 的 选择 。 
例如 ， 许 多 应 用 程序 有 一 个 国家 的 列表 作为 数据 的 一 部 分 。 即 使 该 列表 
中 包括 一 些 额外 的 信息 ， 例 如 产品 是 否 在 每 个 国家 都 提供 ， 列 表 也 不 会 
频繁 变化 。 在 这 种 情况 下 ， 通 党 将 数据 预 加 载 到 本 地 存储 对 象 中 ， 然 后 
在 必要 时 有 条 件 地 重 载 ， 这 样 用 户 将 获得 新 的 数据 ， 而 不 必 等 待 当 前 数 
据 。 








当然 ， 本 地 存储 对 于 处 理 一 个 可 以 脱 机 工作 的 Web 应 用 也 是 必 不 可 
少 的 。 虽 然 近 来 似乎 到 处 都 可 以 对 互联 网 进行 访问 ， 但 这 不 是 绝对 的 ， 
即使 对 智能 手机 也 是 如 此 。 使 用 移动 设备 《如 iPod touch) 的 用 户 ， 只 
有 在 有 WiFi 的 地 方才 能 访问 互联 网 ， 甚 至 像 iPhone 或 Android 智 能 手机 也 
有 不 能 上 网 的 死 区 。 








BHXTHTML 5 的 有 发展， 已 经 发 起 了 一 系列 运动 ， 为 浏览 需 提 供 一 种 
创建 一 个 持久 的 本 地 存储 的 方法 ， 但 这 一 运动 的 结果 尚未 形成 。 如 何在 
客户 端 人 存储 数据 ， 目 前 至 少 有 三 个 不 同 的 方案 。 


在 2007 年 ， 作 为 Gears 的 一 部 分 ，Google 推 出 基于 浏览 器 的 SQLite 数 
据 库 。 基 于 Webkit 的 浏览 器 ， 包 括 Chrome、Safari、iPhone 和 Android 手 
机 上 的 浏览 器 ， 实 现 了 一 个 Gears SQLite 数 据 库 版 本 。 然 而 ，SQLite 从 
HTML 5 方案 中 去 掉 了 ， 因 为 它 是 一 个 单 源 的 组 件 。 


localStorage 机 制 提供 一 个 持续 路 Web 重 载 的 JavaScript 对 象 。 这 种 机 
制 似乎 是 合理 的 、 一 致 的 和 稳定 的 。localStorage 对 于 存储 小 规模 的 数 
据 ， 如 session 信 息 或 用 户 偏好 。 








本 章 介 绍 如 何 使 用 当前 的 localStorage 实 现 本 地 存储 。 在 下 面 的 章节 
中 ， 将 看 到 已 经 出 现在 一 些 浏览 器 中 的 更 加 复杂 和 先进 的 本 地 存储 形 
rk: IndexedDB。 


localStorage#llsessionStorage Xt & 


现代 浏览 器 为 程序 员 提 供 两 个 存储 对 象 ，localStorage 和 
sessionStorgage。 每 个 对 象 都 将 数据 保存 为 键 和 值 。 它 们 有 相同 的 接 
口 ， 以 同样 的 方式 工作 ， 除 了 一 个 例外 。localStorage 对 象 持续 跨 浏览 串 
重新 启动 ， 而 sessionStorage 对 象 在 浏览 器 的 session 重 新 启动 时 对 自身 进 
行 重 置 。 这 可 能 是 当 浏览 器 关闭 或 窗口 关闭 的 时 候 。 确 切 在 什么 时 候 发 
生 这 种 情况 将 取决 于 具体 的 浏览 器 。 








设置 和 获取 这 些 对 象 是 非常 简单 的 ， 如 例 4-1 所 示 。 


例 4-1: 访问 localStorage 





// 设 置 
localStorage.sessionID-sessionld; 
localStorage.setItem('sessionID', sessionId); 
// 获 取 

var sessionId; 
sessioniId=localStorage.sessionID; 
sessionlId-localStorage.getlItem('sessionId'); 
localStorage.sessionId-undefined; 
localStorage.removeItem('sessionId!); 





































































































浏览 器 存储 如 cookies 实 现 了 一 个 “同根 同 源 * 的 集 略 ， 使 不 同 的 网 站 
互 不 干扰 或 读 取 对 方 的 数据 。 但 在 本 节 中 的 两 种 存储 对 象 都 存储 在 用 户 
的 磁盘 上 《与 cookies 相 似 ) ， 因 此 一 个 有 经 验 的 用 户 就 能 找到 方法 来 编 
辑 数 据 。Chrome 的 开发 者 工具 人 允许 程序 员 编 辑 存储 对 象 ， 可 以 在 Firefox 





中 通过 Firebug 或 一 些 其 他 工具 编辑 它 。 因 此 ， 尺 管 其 他 网 站 不 能 向 存储 
对 象 中 注入 数据 ， 但 是 这 些 对 象 仍 然 不 应 该 被 信任 。 


Cookies 受 到 了 一 定 的 限制 : Cookies 的 大 小 只 限于 约 4KB， 必 须 通 
过 每 个 Ajax 请 求 传送 到 服务 器 ， 大 大 提高 了 网 络 流量 。 浏 览 器 的 
localStorage 大 方 多 了 。HTML 5 规范 中 没有 对 大 小 列 出 确切 的 限制 ， 但 
大 多 数 的 浏览 器 为 每 个 Web 主 机 作 了 5MB 左 右 的 限制 。 程 序 员 不 应 该 假 
定 一 个 非常 大 的 存储 区 域 。 








数据 可 以 通过 直接 访问 对 象 或 一 组 访问 函数 存储 在 存储 对 象 中 。 
Session 对 象 只 能 存储 字符 串 ， 因 此 存储 的 任何 对 象 类 型 都 要 强制 转换 为 
一 个 字符 串 。 这 意味 着 一 个 对 象 将 存储 为 [object Objectl， 这 可 能 不 是 想 
要 的 结果 。 因 此 要 存储 一 个 对 象 或 数组 ， 先 将 其 转换 为 JSON。 


每 当 一 个 存储 对 象 中 的 值 发 生变 化 时 ， 它 会 触发 一 个 存储 事件 。 此 
事件 将 显示 键 、 它 原来 的 值 以 及 它 的 新 值 。 例 4-2 古 一 个 典型 的 数据 结 
构 。 不 像 某 些 事件 (如 点 击 ) ， 存 储 事件 不 能 阻止 。 应 用 没有 办 法 告诉 
浏览 器 不 做 出 改变 。 变 化 发 生 后 ， 事 件 只 是 简单 地 通知 应 用 。 











例 4-2: 例 4-2 存 储 事件 接口 





var storageEvent={ 
key: 'key', 

oldValue: 'old', 
newValue: 'newValue', 
url: “UCL”, 


storageArea: storage// 更 改 的 存储 区 域 











Webkit 在 开发 者 工具 中 提供 了 一 个 屏幕 ， 程 序 员 可 以 在 这 里 查看 和 
编辑 localStorage 和 sessionStorage 对 象 〈 见 图 4-1) 。 从 开发 者 工具 窗 
口 ， 单 击 "Storage" 选 项 卡 。 会 显示 一 个 页 面 中 的 localStorage 和 
sessionStorage 对 象 。 存 储 屏 幕 也 是 完全 可 编辑 的 ， 可 以 在 这 里 对 键 进行 
添加 ， 删 除 和 编辑 。 








图 41 Chrome 存储 查看 器 


虽然 Firebug 不 像 Chrome 和 其 他 基于 WebKit 的 浏览 器 那样 提供 local 
Storage 和 sessionStorage 对 象 的 接口 ， 但 是 可 以 通过 JavaScript 控 制 台 访 问 
对 象 ， 而 且 可 以 在 这 里 对 键 进行 添加 、 编 辑 和 删除 操作 。 假 以 时 日 ， 希 
望 有 人 会 写 一 个 Firebug 扩 展 ， 实 现 这 一 功能 








当然 ， 可 以 编写 一 个 目 定 义 界 面 得 看 和 编辑 任何 浏览 器 上 的 存储 对 


象 。 用 例 4-1 中 所 示 的 GetItem 和 removeItem 调 用 在 屏幕 上 创建 一 个 构 
件 ， 并 允许 通过 编辑 文本 框 进行 编辑 。 例 4-3 显 示 了 一 个 构件 的 框架 。 


例 4-3: 存储 得 看 器 








Function createLocalStorageViewer () 








( 1 

{ 
$('<table></table>') .attr ( 
{ 


"id": "LocalStorageViewer", 

"Class": 'hidden viewer' 

)).appendTo('body'); 

localStorage.on('update', viewer.load); 

var viewer- 

{ 

load: function loadData() 

{ 

var data,buffer; 

var renderLine=function (line) 

{ 

return"<tr key='{key}'value='{value}'>\n". populate (line) + 
"<td class='remove'>Remove Key</td>"+ 

"<td class='storage-key'>{key}</td><td>{value}</td></tr 
.populate (line); 

E 

buffer=Object.keys (localStorage) .map (function (key) 

var rec= 

{ 

key: key, 

value: localStorage[data] 

F 

return rec; 

}); 

}; 
S("#LocalStorageViewer") .html (buffer.map(renderLine) .join('')); 
S("#LocalStorageViewer tr.remove") .click (function () 

{ 
var key=S(this).parent('tr').attr('key') .remove(); 
localStorage [key] =undefined; 

})s 

S("#LocalStroageViewer tr") .dolclick (function () 

{ 
var key=$ (this) .attr('key'); 
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var value-$(this).attr('value'); 

var newValue=prompt ("Change Value of"+key+"?", value); 
if (newValue!--null) 

{ 


localStorage[key]=newValue; 








在 ExtJS 中 使 用 localStorage 


ExtJS 是 一 个 非常 流行 的 JavaScript 框 架 ， 人 允许 非常 复杂 的 交互 显 


示 ， 在 前 面 的 章节 中 展示 了 一 些 ExtJS 例 子 。 本 节 说 明 如 何 使 用 ExtJS 的 





localStorage. 





ExUS 的 一 个 不 错 的 功能 是 许多 对 象 可 以 记录 状态 。 例 如 ，ExtUS 表 
格 对 象 允 许 用 户 调整 列 的 矿 寸 ， 隐 藏 和 显示 它们 ， 并 重新 排列 它们 的 顺 
序 ， 当 用 户 以 后 回 到 该 应 用 时 这 些 变化 都 记录 并 重新 显示 。 这 人 允许 每 个 
用 户 定 制 应 用 元 系 工 作 的 方式 的 。 








ExtJS 提 供 了 一 个 对 象 来 保存 状态 ， 但 要 使 用 cookie 储 存 数据 。 一 个 
复杂 的 应 用 可 以 创造 出 足以 超过 Cookie 大 小 限制 的 状态 数量 。 一 个 包含 
几 十 个 网 格 的 应 用 可 能 超出 cookie 的 大 小 ， 这 样 会 锁定 应 用 。 因 此 使 用 
localStorage 会 好 得 多 ， 利 用 其 较 大 容量 的 优势 ， 避 免 了 在 每 次 请 求 中 友 
送 数据 到 服务 器 的 开销 。 





建立 一 个 日 定义 状态 provider 对 象 其 实 是 很 容易 的 。 在 例 4-4 中 


provider 扩 展 了 通用 的 provider 对 象 和 三 个 方法 : set、clear 和 get。 这 些 方 
法 简单 地 读 取 和 写 入 存储 数据 。 在 例 4-4 中 ， 通 过 相当 简单 的 方法 使 


Hi"state "字符 串 加 上 被 保存 元 系 的 ID 对 存储 的 数据 进行 索引 





。 这 是 一 


个 合理 的 方法 。 


例 4-4: ExtJS 本 地 状态 提供 者 Local State Provider 





de 





Ext.ux.LocalProvider=function() { 
Ext.ux.LocalProvider.superclass.constructor.call (this); 
}3 
Ext.extend(Ext.ux.LocalProvider,Ext.state.Provider, { 
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set: function (name,value){ 

if (typeof value=="undefined"||value===nul11){ 
localStorage['state '+name]=undefined; 
return; 

} 

else( 





localStorage['state '*name]-this.encodeValue (value): 
} 
} ， 
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//private 
clear: function (name) { 
localStorage['state_'+name]=undefined; 








}> 
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get: function (name,defaultValue){ 
return Ext.value(this.decodeValue(localStorage['state '-*name]), 
faultValue); 





} 
})s 
// 设 置 状 态 处 理 函 数 

Ext.onReady(function setupState() { 

var provider-new Ext.ux.LocalProvider(); 
Ext.state.Manager.setProvider (provider); 


)): 
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也 可 以 用 一 个 大 型 对 象 存 储 所 有 状态 数据 ， 并 将 该 对 象 存储 到 一 个 
存储 键 中 。 这 样 做 有 一 个 优点 ， 不 会 创建 大 量 的 存储 元 系 ， 但 会 使 代码 
比较 复 人 本 。 此 外 ， 如 果 有 两 个 窗口 尝试 更 新 存储 ， 其 中 之 一 可 能 会 干扰 
另 一 个 窗口 制造 的 变化 。 对 于 有 竞争 条 件 的 问题 ， 这 里 没有 很 好 的 解决 
方案 。 通常， 在 可 能 有 问题 的 地 方 ， 使 用 IndexedDB 或 一 些 其 他 解决 方 
案 可 能 更 好 。 








离线 加 载 存储 数据 





当 应 用 使 用 的 某 些 持 久 性 数据 是 相对 静态 的 数据 时 ， 为 更 快速 地 访 
问 ， 将 其 加 载 到 本 地 存储 中 可 能 会 有 意义 。 在 这 种 情况 下 ， 
Ext.data.JsonStore 对 象 需要 进行 修改 ， 以 便 load(0) 方 法 在 localStorage 区 域 
中 查找 数据 ， 然 后 再 尝试 从 服务 器 加 载 数据 。 从 localStorage 加 载 数 据 
后 ，Ext.data.JsonStore 应 该 调用 服务 器 来 检查 数据 是 否 已 经 改变 。 这 
样 ， 应 用 程序 可 以 使 数据 立即 对 用 户 可 用 ， 而 且 只 需 花 费 尽 可 能 小 的 短 
期 开销 。 这 样 可 以 使 用 户 界 面 感觉 上 更 快 ， 并 减少 应 用 程序 占用 的 带宽 
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ER o 

















对 于 大 多 数 的 请 求 ， 数 据 不 会 改变 ， 因 此 数据 使 用 ETag 的 某 种 形式 
是 非常 有 意义 的 。 通 过 一 个 HTTP GET 请 求 和 一 个 If-None-Match 头 从 服 
务 器 请 求 数据 。 如 果 服 务 嚣 确定 该 数据 并 没有 改变 ， 它 可 以 返回 一 个 
304 Not Modified 响 应 。 如 果 数 据 已 更 改 ， 服 务 器 发 回 新 的 数据 ， 并 在 
Ext.data.JsonStore 对 象 和 sessionStorage 对 象 中 都 加 载 该 应 用 。 


Ext.data.PreloadStore 对 象 ( 见 例 4-6) 将 数据 作为 一 个 大 型 的 JSON 
对 象 〈 见 例 4-5) 存储 到 session 绥 存 中 。 进 一 步 将 服务 器 返回 的 数据 包 
装 到 JSON 闭 包 ， 这 使 得 它 能 够 存储 一 些 元 数据 。 在 这 种 情况 下 ， 存 储 
ETag 数 据 和 数据 加 载 的 日 期 。 





例 4-5: Ext.data.PreloadStore 离 线 数据 格式 








"etag": "25£9e794323b453885f5181f1b624d0b", 
"loadDate": "26-jan-2011", 














"data": { 

"root": [f{ 

"Code": "us", 

"name": "United States" 
}， 

{ 

"Code": "ca", 

"name": "Canada" 





注意 : 当 构 建 一 个 ETag 时 ， 请 务必 使 用 一 个 好 的 哈 希 函数 。MD5 可 
能 是 最 好 的 选择 。 也 可 以 用 SHA1， 但 它 会 产生 一 个 非常 长 的 字符 囊 ， 
因此 可 能 不 可 取 。 从 理论 上 讲 ，MD5 可 能 会 被 破解 ， 但 在 缓存 控制 的 操 
作 中 ， 不 需要 为 此 担心 。 





localStorage 对 象 中 的 数据 可 以 从 背景 中 改变 。 正 如 已 解释 过 的 ， 用 
户 可 以 通过 Chrome 开 发 者 工具 或 Firebug 的 命令 行 改 变 该 数据 。 或 者 也 
可 能 只 是 磁 巧 用 户 有 两 个 相同 浏览 费 打 开 了 同一 个 应 用 。 因 此 监听 
localStorage 对 象 的 更 新 事件 对 store 非 党 重要 。 


大 部 分 的 工作 在 beforeload 事 件 处 理 函 数 中 完成 。 该 处 理 函 数 检查 
存储 数据 的 缓存 副本 ， 如 果 存 在 ， 加 载 它 到 Store 中 。 如 果 有 数据 出 现 ， 
该 处 理 函 数 也 将 重新 载 入 数据 ， 但 会 使 用 Function.defer0 方 法 延迟 加 


载 ， 直 到 系统 有 望 完成 加 载 网 页 的 时 间 ， 因 此 这 样 做 加 载 将 很 少 会 干扰 
vee 


store.doConditionalLoad() 方 法 使 Ajax 调用 服务 器 加 载 数 据 。 它 包含 
的 I-None-Match 头 ， 这 样 ， 如 果 数 据 没 有 改变 ， 就 会 加 载 当 前 的 数据 。 
它 还 包括 一 个 强制 选项 ， 使 beforeload 处 理 函 数 加 载 新 的 数据 ， 而 不 是 
试图 刷新 localStorage 中 对 象 缓存 版 本 存储 的 数据 。 


一 般 把 SECOND、MINUTE 和 HOUR 定 义 为 常数 ， 这 样 做 只 是 为 了 
使 代码 更 具 可 读 性 。 


例 4-6: Ext.data.PreloadStore 








Ext.extend(Ext.data.PreloadStore,Exta.data.JsonStore, { 
indexKey: '', 
// 默 认 索 引 键 
loadDefer: Time.MINUTE 
/7 加 载 数据 需要 加 载 多 长 时 间 

listeners: { 

load: function load(store, records,options) 

{ 

var etag=this.reader.etag; 

var jsonData-this.reader.jsonData; 

var data- 

{ 

etag: etag, 

date: new date(), 

data: jsonData 

}3 

sessionStorage[store.indexKey]-Ext.encode (data); 
) 

beforeload: function beforeLoad(store,options) 

{ 

var data-sessionStorage[store.indexKey]: 

if (data undefined||options.force) 







































































{ 

return true; // 缓 存 中 没有 ， 从 服务 器 加 载 
} 

var raw-Ext.decode (data): 

store. loadData (raw. data): 

// 推 迟 重新 加 载 数据 直到 条 件 达 到 
store.doConditionalLoad.defer(store.loadDefer,store, [raw.etag]); 
return false; 

} 

} ， 

doConditionalLoad: function doConditionalLoad (etag) 
{ 

this.proxy.headers["If-None-Match"]-etag; 
this.load( 

{ 
force: true 

)): 

) 

forceLoad: function() 

{ 

// 在 一 个 虚 ETag 中 传递 强制 加 载 
this.doConditionalLoad(''); 
} 

)): 







































































为 以 后 服务 志 同 步 存 储 变 化 





在 一 个 应 用 可 以 离线 使 用 或 片 状 连 接 到 互联 网 的 事件 中 ， 向 用 户 提 
供 一 种 不 需要 有 网 络 存在 的 保存 修改 的 方法 应 该 会 获得 不 错 的 效果 。 要 
做 到 这 一 点 ， 把 每 个 记录 中 的 变化 写 入 一 个 localStorage 对 象 的 队列 中 。 
当 浏 览 器 再 次 联机 时 ， 队 列 可 以 推送 到 服务 器 。 这 类 似 于 数据 库 中 使 用 
的 事务 日 志 。 





存储 队列 如 例 4-7 所 示 。 队 列 中 的 每 个 记录 代表 在 服务 器 上 有 要 采取 
的 一 个 行动 。 当 然 ， 确 切 的 格式 将 根据 特定 应 用 的 需求 而 确定 。 





例 4-7: 存储 队列 数据 


[ 

{ 

"url": "/index.php", 
"params": {} 

} ， 

i 

"url": "/index.php",; 
"params": {} 

) 

{ 

"url": "/index.php", 
"params": {} 

} 

] 
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8 获取 该 队列 ， 并 将 第 一 个 元 素 发 送 到 服务 器 。 如 果 访 请求 成 功 ， 则 取 
下 一 个 元 素 ， 并 继续 处 理 队 列 中 的 元 素 ， 直 到 整个 队列 发 送 完成 。 即 使 
队列 很 长 ， 因 为 Ajax 以 异步 方式 处 理 每 个 项 目 ， 所 以 该 过 程 的 执行 也 会 
实现 对 用 户 的 影响 最 小 。 为 了 减少 Ajax 调用 的 数量 ， 也 可 以 将 该 代码 修 
改 为 按 组 发 送 队 列 ， 每 次 发 送 5 个 。 





例 4-8: 存储 队列 








var save=function save (queue) 
{ 
if (queue.length>0) 

{ 

$.ajax( 

{ 

url: 'save.php', 

data: queue.slice(0, 5), 

success: function(data, status, request) 
{ 


save (queue.slice(5)); 














jQuery 插件 


如 果 所 有 客户 站 存储 选项 的 不 确定 性 多 得 让 人 抓 狂 ， 还 可 以 有 其 他 
选择 。 因 为 JavaScript 中 有 许多 东西 ， 可 以 用 一 个 提供 更 好 接口 的 模块 履 
着 一 个 不 一 致 的 坏 接口 。 这 里 有 两 个 这 样 的 模块 ， 可 以 使 工作 更 轻松 。 





DSt 


DSt Chttp://github.com/gamache/DSt) 是 一 个 包装 localStorage 对 象 的 
简单 的 类 库 。DSt 可 以 是 一 个 独立 的 或 作为 jQuery 插件 工作 的 类 库 。 它 
会 自动 将 复杂 的 对 象 转换 成 任何 一 个 JSON 结 构 。 





DSt 还 可 以 保存 和 恢复 表单 的 元 素 或 者 整个 表单 的 状态 。 传 递 元 素 
或 元 素 的 ID 到 DSt.store(0) 方 法 可 以 保存 和 恢复 元 素 。 之 后 ， 要 恢复 该 元 
素 ， 则 传递 该 元 素 到 DSt.recall() 方 法 。 


要 存储 整个 表单 的 状态 ， 使 用 DStstore_form() 方 法 。 它 把 ID 或 表单 
本 映 的 元 素 作为 参数 。 该 数据 可 以 用 DSt.populate_form() 方 法 恢复 。 例 4- 
9 是 DSt 最 简单 的 使 用 方法 。 


例 4-9: DSt 接 口 


S.DSt.set('key', 'value'); 


Var value=$.DSt.get('key'); 
$.DSt.store('element'); // 存 储 一 个 form 元 素 的 值 
$.DSt.recall('element'); // 再 次 调用 form 元 素 的 值 
$.DSt.store form('form") ; 

$.DSt.populate form('form')s 










































































jStore 


如 果 不 想 分 辩 哪 个 浏览 器 支持 什么 存储 引擎 ， 也 不 想 为 每 一 种 情况 
创建 不 同 的 代码 ， 有 一 个 好 的 解决 方案 : jQuery 的 jStore 插 件 
(http://twablet.com/docs.html?p=jstore) 。 该 插件 支持 localStorage、 
sessionStorage. Gears SQLite 和 HTML 5 SQLite， 以 及 Flash Storage (N 
f£) 和 下 7 的 专 有 解决 方案 。 


jStore 插 件 有 一 个 简单 的 接口 ， 允 许 程序 员 将 “名 称 / 值 ” 对 存储 在 不 
同 的 存储 引擎 中 。 它 为 所 有 引擎 提供 了 一 组 接口 ， 以 便 在 给 定 浏览 器 不 
存在 存储 引擎 的 情况 下 ， 程 序 可 以 在 需要 时 适当 降级 。 








jStore 插 件 在 jQuery.jStore.Availability 实 例 变 量 中 提供 了 一 个 可 用 的 
引擎 列表 。 程 序 应 该 选择 最 有 意义 的 引擎 。 


对 于 需要 多 浏览 器 支持 的 应 用 ， 这 可 能 是 一 个 有 益 的 补充 。 详 情 请 
参阅 jStore 网 页 。 


A5 IndexedDB 





本 地 存储 接口 ( 见 第 4 章 〉 为 存储 少量 数据 提供 了 一 个 展 好 的 接 
口 ， 但 是 在 许多 情况 下 浏览 器 将 此 存储 空间 限制 在 5MB。 如 有 果 应 用 的 存 
储 需要 超过 该 限制 ， 或 者 应 用 要 求 查 询 能 够 访问 结构 化 的 数据 ， 那 么 本 
地 存储 束 不 是 最 好 的 选择 。 在 这 种 情况 下 ， 应 用 开发 人 员 有 更 健壮 的 存 
储 机 制 可 用 。IndexedDB 在 许多 浏览 器 上 提供 了 这 种 机 制 。 例 如 ， 程 序 
员 可 以 在 mdexedDB 中 保存 产品 目录 数据 ， 因 此 ， 当 用 户 搜索 一 个 项 目 
时 ， 浏 览 器 并 不 需要 到 服务 器 去 寻找 茶 个 项 目的 数据 。 

















IndexedDB 是 一 种 NoSQL 数 据 库 ， 如 果 使 用 过 MongoDB 或 CouchDB 
这 类 产品 ， 那 么 就 会 感到 很 熟悉 。 程 序 可 以 直接 在 IndexedDB 数 据 存储 
中 存储 JavaScript 数 据 。 





Firefox 从 版 本 4 开始 包含 IndexedDB。Google Chrome 从 版 本 11 起 也 
引入 了 IndexedDB。Microsoft 在 其 HTML 5 实验 室 网 站 
(http://html5labs.interoperabilitybridges.com) 有 一 个 作为 ActiveX 控 件 的 
版 本 ， 可 手动 加 入 I 正中， 在 可 预见 的 未 来 可 能 出 现在 下 的 主 发 布 版 本 
中 ， 也 可 能 在 未 来 的 一 年 或 两 年 后 ， 其 他 浏览 器 中 也 有 IndexedDB 可 
用 。 形 式 上 ，IndexedDB 现 在 是 一 个 来 自 W3C 的 建议 草案 


Chttp://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html) . 


注意 : 因为 到 目前 为 止 只 有 两 个 浏览 器 支持 IndexedDB ， 所 以 
IndexedDB 的 使 用 应 限制 在 应 用 程序 内 部 ， 可 以 限制 所 选择 的 浏览 器 。 
在 一 般 的 应 用 中 使 用 它 ， 应 格外 小 心 ，Mictosoft Internet Explorer, 
Opera 和 Safari 还 不 支持 此 功能 (至少 到 2011 年 7 月 为 止 ) 。 


与 localStorage 一 样 ，IndexedDB 有 着 严格 的 同 源 策略 。 因 此 页 面 创 
建 的 数据 库 不 能 被 其 他 主机 上 的 网 页 访问 。 这 为 数据 提供 一 个 安全 等 
级 ， 因 此 它 被 保护 不 受 其 他 页 面 上 运行 的 脚本 干扰 。 但 页 面 上 运行 的 任 
何 创建 数据 库 的 脚本 具有 完全 访问 该 数据 库 的 权限 ， 当 然 ， 用 户 具 有 该 
数据 的 访问 权限 。 





IndexedDB 比 SQLite 具 有 如 下 几 个 优势 。 首 先 ， 其 原生 的 数据 存储 
格式 是 一 个 JavaScript 对 象 ， 不 需要 将 一 个 JavaScript 对 象 映射 到 一 个 
SQL 表 结 构 ， 而 SQL 表 结 构 不 太 好 ， 易 站 到 SQL 注入 攻击 。 注 入 式 攻 击 
不 会 发 生 在 IndexedDB 上 ， 昌 然 在 人 攻 些 情况 XSS 可 能 是 一 个 问题 ， 例 
如 用 户 将 JavaScript 加 到 数据 库 中 ， 然 后 再 放 到 一 个 页 面 中 。 





IndexedDB 数 据 存储 提供 了 一 组 接口 ， 在 本 地 磁盘 上 存储 JavaSript 
对 象 。 每 个 对 象 都 必须 有 一 个 键 ， 能 通过 该 键 检索 对 象 ， 也 可 能 还 有 第 
c9. 
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涩 ， 所 以 有 点 难 用 。 但 是 又 与 许多 其 他 JavaScript 接 口 一 样 ，IndexedDB 


被 封装 成 jQuery 插件 ， 因 此 API 非 常 优雅 。 本 章 所 有 的 例子 都 会 用 封闭 
好 的 插件 进行 演示 ， 因 为 这 样 的 代码 比 使 用 原始 接口 的 代码 更 容易 理 
解 。 当 然 ， 如 果 可 以 选择 的 话 我 也 建议 你 这 样 使 用 IndexedDB。 


我 将 演示 的 例子 都 是 围绕 理论 图 书 搜索 的 应 用 程序 。 每 本 书 都 会 有 


一 个 记录 格式 ， 如 例 5-1 所 示 。 本 例 将 按 title 和 price 字 段 进行 索引 ， 以 便 
用 户 进行 查询 。 


例 5-1: 设置 事务 版 本 


{ 

"title": "Real World Haskell", 
"price": 49.95, 

"Price can". 49.95, 
"authors": [ 

"Bryan O'Sullivan", 

"John Goerzen", 

"Don Stewart" 


] ， 





"cover animal": "Rhinosorus 
"cover_url": "http://..."; 
"topics": ["Haskell"] 

} 





Beatle", 





IndexedDB 通 过 内 置 的 版 本 控制 系统 保持 应 用 程序 和 相关 的 数据 存 
储 同 步 更 新 。 每 个 数据 存储 都 有 一 个 版 本 ， 应 用 可 以 在 加 载 时 对 其 进行 


检查 。 如 果 不 是 最 新 版 本 ， 应 用 可 以 采取 适当 的 动作 ， 通 过 创建 新 对 象 


和 索引 使 其 成 为 最 新 版 本 。 这 一 部 分 已 经 目 动 化 了 ， 因 为 当 结构 有 变化 


的 时 候 ，Indexed DB 的 jQuery 接口 会 按 需 更 新 版 本 。 








当 加 入 了 新 的 数据 存储 或 索引 时 ， 版 本 应 随 之 改变 。 当 索引 或 存储 
被 删除 时 ， 版 本 也 必须 相应 改变 。IndexedDB 的 jQuery 模块 会 自动 完成 
这 些 工 作 。 我 们 只 需要 让 应 用 程序 检查 不 同 的 objectStores 对 象 和 indexes 
是 否 存在 就 能 保证 格式 是 正确 的 。 如 例 5-2 所 示 ， 如 果 index 不 存在 就 会 
自动 创建 一 个 。 








例 5-2: 创建 索引 





S.indexeddb (db) .objectStore (objectStore) .index (field); 








与 IndexedDB 的 交互 必须 通过 事务 的 方式 实现 。 因 为 theIndexedDB 
接口 是 异步 的 ， 而 且 IndexedDB 可 以 从 一 个 Web Worker 或 运行 在 另 一 个 
线程 中 的 第 二 个 窗口 访问 (在 JavaScript 中 的 每 个 窗口 中 运行 其 自己 的 线 
程 ) 。 尽 管 同 时 访问 的 情况 很 罕见 ， 但 是 多 个 JavaScript 线 程 同时 访问 一 
个 给 定 的 IndexedDB 数 据 库 的 情况 还 是 可 能 出 现 ， 因 此 接口 必须 防止 苋 
争 条 件 。 








注意 : IndexedDB 接 口 规范 包括 一 个 可 以 在 Web Worket 中 使 用 接口 
的 同步 版 本 ， 但 是 还 没有 在 浏览 器 中 实现 。 此 外 ， 使 用 该 接口 的 代码 不 
能 在 WebWorker 和 非 WebWorket 环 境 之 间 重 用 。 





IndexedDB 中 数据 存储 的 基本 单位 是 数据 库 。IndexedDB 中 的 数据 
库 是 关系 型 数据 库 ， 与 MySQL 数 据 库 的 大 致 相同 。 每 个 mdexedDB 数 据 














库 包 含 一 个 或 多 个 ObjectStores， 可 等 同 于 SQL 数据 库 中 的 表 。 但 是 与 
SQL 数据 库 不 同 ，ObjectStores 没 有 固定 的 结构 。 








ObjectStores 中 的 每 个 记录 是 一 个 键 / 值 对 ， 其 中 键 是 主 索引 ， 值 是 
一 个 JavaScript 对 象 。 任 何 可 序列 化 的 JavaScript 对 象 都 可 插入 到 存储 对 
象 中 。 


警告 : IndexedDB 中 一 般 不 能 存储 闭 包 和 函数 。 


使 用 mdexedDB 的 第 一 步 是 创建 一 个 新 的 数据 库 。 这 一 步 只 需要 选 
一 个 数据 库 名 ， 并 请 求 打 开 它 。 如 宋 数 据 库 不 存在 ， 就 创建 它 。 如 果 存 
在 ， 则 直接 打开 它 。IndexedDB 的 jQuery 插件 让 它 非 常 简单 ， 又 需要 给 
BUR F£ — ^ 44 5639547 : 





S.indexeddb (db); 





数据 库 打 开 后 ， 要 创建 一 个 事务 对 象 。 创 建 该 对 象 的 函数 将 使 用 一 
个 存储 对 象 列表 ， 以 及 一 个 可 选 的 模式 变量 和 超时 。 该 模式 变量 可 以 是 
IDB Transcation.READ ONLY、IDBTranscation.READ_WRITE 或 





IDBTranscation.VERSION_CHANGE， 默 认为 
IDBTranscation.READ ONLY。 超 时 指定 以 ms 为 单位 ， 如 果 没 有 超时 ， 
则 可 以 设置 为 0。 


由 于 IndexedDB 的 jQuery API 为 每 个 简单 操作 都 隐 式 地 创建 了 事 





务 ， 所 以 只 有 在 需要 同时 更 新 两 个 以 上 的 objectStore 或 者 做 一 些 奇 怪 的 
操作 时 ， 才 需要 像 例 5-3 一 样 创建 显 式 事务 。 在 使 用 map、forEach 或 者 
之 类 的 操作 循环 添加 列表 项 的 时 候 ， 为 了 让 所 有 数据 存储 时 表现 出 一 至 
行为 ， 也 有 可 能 需要 创建 显 式 事务 。 当 事务 创建 完成 之 后 ， 需 要 调用 


transaction.done() 提 交 事 务 ， 或 者 用 transaction.abort() 进 行 回 深 。 





例 5-3: 使 用 显 式 事务 





var transaction-$.indexeddb(db).transaction([]; 

IDBTransaction .READ WR TE); 

transaction.then(write,writeError); 

data.map (function (line) { 
transaction.objectStore (objectStore) .add (line) .then(write,writeErr 
return line; 

)): 


transaction.done(); 


















































OOO | 


添加 、 更 新 记录 


所 有 添加 到 一 个 IndexedDB 数 据 库 的 数据 必须 要 在 一 个 事务 的 内 部 
完成 ， 这 可 以 防止 其 他 JavaScript 进 程 修改 同一 数据 。 尽 管 JavaScript 是 
单线 程 的 ， 从 一 个 Web Worker 或 者 同一 个 浏览 器 中 的 第 二 个 窗口 中 都 可 
以 打开 该 数据 存储 ， 并 且 都 能 同时 修改 同一 数据 。 





一 般 来 说 ， 如 例 5-4 所 示 ， 向 objectStore 对 象 中 添加 一 条 记录 ， 只 需 
要 调用 对 象 的 add0) 方 法 。 它 会 自动 创建 对 应 的 事务 。 


例 5-4: 添加 一 行 数 据 





S.indexeddb (db) .objectStore (objectStore) .add (book) .then(wrap,err); 











如 果 需 要 添加 多 条 数据 ， 可 以 使 用 例 5-5 所 示 的 事务 。 在 所 有 操作 
完成 之 后 该 事务 才 会 被 提交 。 调 用 transaction.done() 方 法 之 后 会 将 事务 
会 标记 为 完成 ， 此 时 整个 事务 才 会 被 提交 。 


例 5-5: 添加 多 行 数据 





var transaction-$.indexeddb(db).transaction([]; 
IDBTransaction. READ WRITE); 
transaction.then(write,writeError) ; 
data.map (function (record) { 
transaction.objectStore(objectStore).add(record).then(write,writeE 
)): 


二 一 



























































正如 add0) 方 法 一 样 ， 可 以 用 update0) 方 法 更 新 一 条 记录 。 区 别 是 ， 
如 果 记 录 不 存在 那么 update(0) 方 法 会 返回 失败 。 


如 果 需 要 一 次 性 更 新 多 条 记录 ， 可 以 用 cursor〈 详 见 本 章 的 “检索 数 
H 遇 历 这 组 数据 。 这 种 情况 下 ， 用 一 个 回调 函数 调用 cursor 的 
updateEach() 方 法 。 这 个 函数 会 被 cursor 指 向 的 每 个 元 素 上 调用 ， 它 的 返 
回 值 是 该 条 记录 更 新 后 的 值 ， 这 些 值 会 在 所 有 条 目 处 理 完 成 之 后 写 回 数 
据 库 中 。 返 回 值 为 false 的 行 不 会 保存 。 











添加 索引 


索引 只 能 在 一 个 setVersion 事 务 中 添加 或 删除 。 索 引 可 以 在 
objectStore 被 创建 的 时 候 一 起 创建 ， 也 可 以 在 objectStore 创 建 之 后 调用 
index() 方 法 完成 〈 见 例 5-6) 。index0 方 法 在 索引 不 存在 的 时 候 会 创建 索 
引 ， 它 还 会 返回 一 个 index 对 象 用 于 遍历 该 索引 。 








例 5-6: 使 用 索引 





$.indexeddb (db) .objectStore (objectStore) .index (field) .openCursor ([ 
10]) .each (write); 





在 IndexedDB 类 似 的 数据 存储 与 多 数 其 他 数据 存储 之 间 的 一 个 关键 
的 区 别 是 IndexedDB 运 行 在 客户 的 浏览 器 上 ， 因 此 更 新 它 需 要 比 在 中 央 
位 置 的 一 小 组 服务 器 上 运行 的 数据 存储 机 制 考虑 得 更 多 。JavaScript 代 码 
必须 能 够 应 付 ， 用 户 可 能 有 一 个 过 期 的 存储 及 动态 更 新 的 可 能 性 。 








你 可 以 检查 用 户 电脑 中 存储 对 象 正在 使 用 的 数据 库 版 本 ， 如 果 需 要 
的 话 ， 还 可 以 把 版 本 更 新 到 最 新 。 举 个 例子 ，1.0 版 本 的 数据 库 软 件 创 
建 了 两 个 存储 对 象 ， 在 1.1 版 本 又 添加 了 第 三 个 存储 对 象 ， 并 对 存储 对 
象 中 的 一 个 数据 库 表 添加 了 索引 。 通 过 代码 检查 存储 对 象 的 版 本 ， 可 以 
知道 是 否 需要 对 存储 对 象 进行 必 要 的 更 新 ， 或 者 至 少 确认 该 用 户 的 存储 
对 象 是 不 是 正常 的 。IndexedDB 的 jQuery 插件 会 自动 处 理 这 些 问 题 。 











检索 数据 





在 将 数据 存储 到 存储 对 象 中 后 ， 需 要 有 一 种 方法 查询 和 显示 数据 。 
查询 数据 的 方式 有 好 几 种 : 程序 可 能 希望 输出 所 有 数据 、 一 部 分 数据 或 
者 一 条 数据 。 








如 例 5-7 所 示 ， 可 以 用 get(0 方 法 通过 主键 检索 存储 对 象 中 的 一 条 数 
据 。get() 方 法 返回 一 条 可 以 被 then() 方 法 访问 的 对 象 。then0) 方 法 需要 两 
个 回调 函数 作为 参数 : 第 一 个 参数 在 get0) 成 功 返 回 可 访问 对 象 时 被 调 
用 ， 第 二 个 参数 是 为 以 防 万 一 返回 错误 对 象 时 调用 。 


例 5-7: 得 到 一 行 数据 





S.indexeddb (db) .objectStore (objectStore) .get (primaryKey) .then (wrap 





通过 索引 查询 数据 库 的 单条 或 者 特定 范围 的 多 条 数据 也 很 容易 。 首 
先 指定 一 个 特定 的 索引 ， 然 后 用 openCursor() 得 到 cursor,openCursor() 的 
参数 需要 指定 一 个 可 访问 的 范围 ， 这 个 范围 的 两 端 可 以 是 开 区 间 也 可 以 
是 财 区 间 。 例 5-8 展 示 了 一 个 典型 的 查询 语句 。 





例 5-8: 得 到 一 定 范 围 内 的 数据 行 


S.indexeddb (db) .objectStore (objectStore) .index('title') .openCursor 


range 是 通过 形式 为 [lower,upper,lowerExclusive,upperExclusive] 的 4 元 
素数 组 设 定 的 。 前 两 个 元 素 是 整 型 ， 后 两 个 元 素 是 可 选 的 ， 为 布尔 型 。 
range 默 认 是 开 区 间 的 ， 也 就 是 说 [10，20] 指 定 的 范围 是 11 一 19。 但 是 
[10，20，false,false] 指 定 的 范围 在 搜索 时 会 包含 两 端点 。 








如 果 只 想 用 指定 的 上 界 或 者 下 界 搜索 ， 只 需要 设置 不 用 的 参数 为 
undefined。 如 [10，underfined,false] 返 回 所 有 大 于 等 于 10 的 键 值 ， 而 
[undefined，10，undefined,true] 返 回 所 有 小 于 10 的 键 值 。 要 得 到 一 个 特 
定 的 值 ， 可 以 指定 类 似 [10，10，false,false] 这 样 的 范围 。 





最 后 一 种 情况 是 需要 得 到 整个 存储 对 象 的 内 容 。 这 种 情况 下 不 需要 
指定 索引 《除非 需要 将 记录 排序 ) ， 所 以 可 以 直接 在 objectStore 对 象 上 
调用 openCursor()。 回 调 函 数 write 会 依次 在 每 个 元 素 上 调用 ， 如 例 5-9 所 
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例 5-9: 得 到 所 有 行 





$.indexeddb (db) .objectStore (objectStore) .openCursor().each (write); 





删除 数据 





从 一 个 存储 对 象 中 删除 数据 也 很 容易 。 每 个 存储 对 象 有 一 个 delete() 
方法 ， 可 以 用 将 要 删除 的 记录 索引 为 参数 进行 调用 。 存 储 将 删除 这 些 记 
录 ， 然 后 调用 回调 ， 如 例 5-10 所 示 。 


例 5-10: 删除 数据 





$.indexeddb (db) .objectStore (objectStore) .remove (id) .then (write,err 





你 可 以 调用 cursor 的 deleteEach() 方 法 遍历 和 删除 选中 的 行 。 这 个 方 
法 的 行为 类 似 于 数组 过 滤 函 数 ， 删 除 函数 中 返回 true 的 记录 。 如 例 5-11 
所 示 ， 删 除 函 数 isDuplicate() 返 回 true 的 所 有 记录 。 


例 5-11: 删除 重复 的 数据 











$.indexeddb (db) .objectStore (objectStore) .openCursor().deleteEach (f 
{ 
return isDuplicate (value) ; 


s 











第 6 章 ”文件 


由 于 众所周知 的 原因 ， 浏 览 器 访问 文件 系统 的 能 力 历 来 非常 有 限 。 
虽然 HTML 表 单 已 经 能 够 上 传 文件 ， 而 且 茶 些 HITTP 标 头 还 可 以 让 用 户 
从 服务 器 上 下 载 文件 。 但 是 ， 除 了 这 些 特殊 功能 之 外 ， 浏 览 器 不 能 够 访 
问 本 地 文件 系统 上 的 文件 。 一 般 来 说 ， 这 是 一 件 好 事 。 谁 都 不 希望 访问 
的 每 个 网 页 都 能 查看 自己 的 硬盘 ! 


HTML 5 的 一 些 新 功能 让 浏览 器 访问 文件 系统 有 点 受 限 。 新 的 浏览 
器 允许 JavaScript 通 过 现 有 表单 中 的 文件 输入 域 对 文件 进行 访问 。 过 去 浏 
览 器 可 以 通过 表单 上 传 文件 ， 而 现在 可 以 在 JavaScript 中 通过 文件 直接 使 
用 数据 。 此 外 ， 现 在 浏览 器 还 可 以 将 文件 从 桌面 拖 动 到 Web 应 用 中 。 
Google 的 Gmail 使 用 此 功能 允许 用 户 添 加 附件 。 这 一 功能 早先 已 在 Flash 
中 实现 了 ， 但 是 现在 只 需 使 用 JavaScript 就 能 实现 了 。 





这 样 不 会 产生 任何 新 的 安全 问题 ， 因 为 应 用 程序 先 把 这 些 数据 上 传 
到 服务 器 ， 然 后 再 下 载 到 浏览 右 进 行 访问 。 


截至 本 书 编写 时 ，Firefox、Chrome 和 Opera 已 经 支持 这 些 功 能 。 对 
于 Safari 和 Internet Explorer， 可 以 通过 Flash 插 件 实 现 文件 拖 蝶 。 


二 进 制 大 对 象 


JavaScript 对 字符 串 和 数字 一 直 处 理 得 很 好 ， 二 进 制 数据 从 来 就 不 是 
它 的 强项 。 但 是 最 近 JavaScript 已 增加 了 一 个 blob 数 据 类 型 和 接口 ， 用 于 
处 理 二 进 制 大 对 象 (blob) 。JavaScript 将 blob 视 为 一 大 块 元 数据 。 
此 ，JavaScript 可 以 对 blob 进 行 的 实际 操作 十 分 有 限 。 然 而 ，blob 对 移动 
二 进 制 数据 非常 重要 。blob 可 以 从 文件 中 读 取 或 者 写 入 文件 中 《本 章 后 
面 的 “文件 处 理 *”) ， 作 为 URL 的 使 用 ， 存 入 IndexedDB 〈 见 第 5 章 ) ， 传 
递 给 Web Worker 或 者 从 Web Worker 接 收 〈 见 第 8 章 ) 。 





可 以 用 BlobBuilder 接 口 创建 一 个 新 的 blob。 这 样 将 创建 一 个 基本 的 
空 BlobBuilder， 可 以 从 ArrayBuffer 给 它 退 加 一 个 字符 串 、 已 有 的 blob 或 
者 二 进 制 数据 。BlobBuilder.getBlob0) 方 法 返回 实际 的 blob。 


BlobBuilder 在 Firefox 6 中 称 为 MozBlobBuilder， 在 Safari Nightly 版 本 


和 Chrome 8 中 称 为 WebKitBlobBuilder。 


例 6-1 中 ， 原 始 PNG 数 据 传递 给 一 个 BlobBuilder 对 象 ， 用 于 创建 一 
个 blob， 然 后 将 blob 变 成 一 个 URL。URL 对 象 可 以 在 DOM 中 通过 一 个 图 
像 标 记 的 src 属 性 进行 设置 。 


例 6-1: 用 原始 数据 创建 一 个 blob URL 














/*global window, $, BlobBuilder, document, XMLHttpRequest* / 
/*jslint onevar: false,white: false*/ 

function makePNG (pngData) 

{ 
var BlobBuilder-window.BlobBuilder||window.MozBlobBuilder| | 
window.WebKitBlobBuilder; 

var blob=new BlobBuilder(); 

blob.append (pngData) ; 

var url=blob.getBlob('image/png').createObjectURL(); return url; 
} 







































































利用 slice() 方 法 提取 blob 中 的 一 部 分 。 因 为 slice 的 参数 与 array 和 
string 的 同名 方法 的 参数 不 同 ， 在 Firefox 和 Chrome 中 已 经 分 别 被 重 命名 
为 mozSlice() 和 webkitSlice()。 无 论 浏览 器 请 求 什 么 名 称 ， 该 方法 都 会 将 
提取 的 数据 作为 新 的 blob 返 回 。Slice 是 blob API 人 允许 对 blob 原 始 数据 进行 
的 唯一 的 访问 。 


如 果 一 个 blob 包 含 需要 加 载 的 数据 ， 即 使 是 一 个 网 址 ， 它 可 以 经 过 
变换 ， 通 过 createObjectURL() 方 法 作为 URL 使 用 。 这 将 返回 一 个 可 以 分 
配给 HTML 标 记 属 性 (该 标记 属性 需要 一 个 URL) 的 对 象 。 例 如 ， 一 个 
包含 图 像 数 据 的 Blob 可 以 被 分 配给 一 个 <img 二 标记 的 src 属 性 来 显示 图 
像 。 


当 它 是 一 个 URL 时 ， 手 动 释放 是 非常 重要 的 ， 因 为 JavaScript 无 法 确 
定 什么 时 候 回 收 该 对 象 。 要 做 到 这 一 点 ， 使 用 revokeBlobURL() 方 法 。 
Blob URL 与 创建 脚本 同 源 ， 因 此 它们 可 以 在 浏览 器 的 同 源 策略 可 能 有 问 
题 的 地 方 灵活 使 用 。 当 用 户 离 开 该 页 面 时 ， 浏 览 器 也 将 撤销 所 有 blob 的 
URL. 


操作 文件 


从 很 多 年 前 开始 ，HTML 表 单 束 能 够 包含 一 个 文件 类 型 将 其 作为 表 
单元 素 ， 并 人 允许 用 户 指定 一 个 文件 上 传 到 服务 器 。 浏 览 右 不 允许 
JavaScript 设 置 这 一 表单 域 ， 因 为 担心 不 应 该 上 传 的 文件 可 能 会 以 某 种 方 
式 被 强制 上 传 。 然 而 ， 新 的 JavaScript API 人 允许 从 已 经 被 用 户 添加 到 表单 
元 素 中 的 本 地 系统 阅读 文件 的 内 容 。 


包含 文件 上 传 域 的 表单 将 提供 一 个 FileList 对 象 。FileList 对 象 的 每 
个 元 素 是 一 个 File 对 象 。 文 件 对 象 向 用 户 提供 文件 名 称 、MIME 类 型 、 
大 小 和 最 后 修改 日 期 。 完 整 路 径 不 会 暴露 在 JavaScript 中 ， 但 是 可 以 在 
Firebug 中 看 到 。 


File 对 象 指向 的 文件 可 以 被 FileReader 对 象 完整 读 取 或 者 使 用 .slice() 
方法 部 分 读 取 。 要 上 传 一 个 非常 大 的 文件 ， 例 如 视频 ， 需 要 将 文件 分 割 
成 较 小 的 部 分 并 分 部 上 传 到 服务 器 ， 这 种 方法 可 能 比 上 传 整个 文件 〈 可 
能 有 几 百 兆 ) 更 好 。 还 应 当 注 意 ， 在 默认 情况 下 ， 许 多 服务 器 将 上 传 文 
件 的 大 小 限制 在 几 十 兆 。 


通过 使 用 FileReader 接 口 ， 程 序 可 以 读 取 该 文件 的 内 容 。 所 有 这 些 
方法 都 返回 void， 并 且 浏 览 器 通过 onload 处 理 函 数 将 文件 读 入 内 存 后 交 
付 该 数据 。 这 个 异步 操作 非常 重要 ， 因 为 将 一 个 很 大 的 文件 读 入 浏览 器 


可 能 要 花 一 些 时 间 。FileReader API 有 四 个 选项 用 于 读 取 文件 。 
FileReader.readDataAsURL() 


将 文件 转换 到 一 个 URL， 使 它 可 以 在 页 面 中 使 用 ， 由 此 产生 的 对 象 
将 包含 文件 的 完整 数据 。 


FileReader.readAsText() 


以 字符 串 形式 返回 数据 ， 黑 认 情 况 下 ， 返 回 的 数据 为 UTF-8 编 码 的 
文本 ， 也 可 以 指定 不 同 的 编码 格式 。 


FileReader.readAsBinaryString() 





以 二 进 制 学 符 串 形式 返回 数据 ， 不 对 内 容 进 行 解释 。 
FileReader.readAsArrayBuffer() 
以 一 个 ArrayBuffer 形 式 返 回 数据 。 


例 6-2 展 示 了 一 个 拖 忠 处 理 函 数 的 例子 。 拖 忠 处 理 将 在 本 半 后 面 
的 “ 拖 忠 ”部 分 完整 介绍 。 对 于 本 例 需 要 明白 的 是 ，drop 是 一 个 传递 给 
addEventListener 的 回调 函数 的 名 字 ， 该 回调 函数 由 事件 处 理 程序 通过 
FileList 对 象 表单 中 的 文件 列表 进行 调用 。 列 表 中 的 第 一 个 文件 动态 创建 
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例 6-2: 在 文档 中 追加 一 个 图 片 








var el=document.getElementBylId('dropzone'); 
el.addEventListener('drop', function (evt) { 
var file-evt.dataTransfer.file[0]; 
file.readDataAsURL (); 

File.onload=function (img) 




































































('div.images').append('«img-').attr(ísrc: img}); 
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把 文件 上 传 到 服务 器 就 会 令 人 很 郁闷， 新 版 本 中 的 XMLHttpRequest 接 
口 就 提供 了 上 传 到 服务 器 的 功能 。 通 过 使 用 FormData 接 口 ， 程 序 可 以 包 
装 文件 并 将 它们 发 送 到 服务 器 。XHMLHttpRequest 还 提供 了 一 些 回调 ， 
可 以 给 用 户 提供 反馈 。onprogress 事 件 返回 已 发 送 的 字 节 数 和 上 传 的 总 
大 小 ， 这 可 以 在 大 量 上 传 时 显示 进度 条 。 上 传 完成 时 ，onComplete 事 件 
被 调用 。 





当 使 用 XMLHttpRequest 上 传 文件 时 ， 服 务 器 会 在 与 标准 表单 接口 
<input type='filemultiple 之 使 用 的 相同 接口 中 看 到 上 传 文件 。 因 此 ， 此 
服务 器 端 代码 应 该 是 与 文件 上 传 相 同 的 自 表 单元 素 被 引入 以 来 一 直 沿 用 
的 标准 代码 。 





例 6-3 展 示 了 用 Ajax 上 传 文件 的 示例 代码 。 它 使 用 formData 对 象 包装 
要 发 送 到 服务 器 的 文件 。FormData 是 一 个 Java 对 象 ， 用 于 把 数据 打包 成 
可 以 被 标准 HITP 上 传 服 务 上 传 的 文件 。 实 现 的 方法 是 把 文件 名 和 文件 
内 容 当 做 一 个 blob 传 递 给 FormData.append()， 然 后 用 XHR2 接 口 把 
FormData 对 象 作 为 Ajax payload 发 送 到 服务 器 。 








例 6-3: 用 Ajax 上 传 文件 








function upload(files) { 

var uploadBlob-function uploadBlob (files, onload) { 
var xhr=new XMLHttpRequest (); 

xhr.open('POST', params.url,true) ; 
xhr.onload=onload; 

xhr.send(files); 

Fs 

var formData=new FormData(); 

files.map (function (file) { 
formData.append(file.fileName, file); 

return file; 

})s 
uploadBlob (files, function () { 
alert ("Upload Finished"); 

} ) ; 

} 


= 
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HTML 5 已 经 增加 了 对 拖 电 的 文 持 。 现 在 可 以 把 一 个 或 多 个 文件 从 
打 面 拖 忠 到 浏览 器 ， 并 用 JavaScript 访 问 这 些 文件 。 例 如 ， 它 可 以 被 文件 
管理 器 用 来 上 传 文件 到 服务 器 ， 或 者 被 图 形 程 序 用 来 操作 图 像 。 一 个 社 
交 网 络 站 点 可 以 允许 用 户 拖 上 忠 图 片 到 浏览 器 中 进行 裁剪 、 缩 放 、 旋 转 以 
及 在 浏览 器 中 预览 ， 然 后 把 它们 上 传 到 服务 器 。 可 以 通过 提供 较 小 的 图 
像 节 省 服务 器 资源 。 


注意 : 为 安全 起 见 ， 文 件 API 不 会 允许 上 传 目录 结构 ， 而 只 是 一 个 
简单 的 文件 清单 。 当 然 ， 如 果 正 在 构建 一 个 文件 管理 器 ， 可 以 让 用 户 上 
传 一 个 压缩 文件 (ZIP, RAR, tar) 并 让 服务 器 打开 。 有 一 些 库 可 以 
用 于 多 数 流行 的 服务 器 端 语言 中 解压 大 多 数 的 压缩 格式 。 


要 实现 拖 上 鼻 ， 需 要 给 目标 DOM 元 际 的 drop 事 件 添 加 一 个 监听 。 指 定 
的 事件 处 理沙 数 将 传递 一 个 参数 ， 其 中 有 一 个 清单 包含 了 被 拖 忠 的 所 有 
文件 。 请 注意 ， 这 个 对 象 看 起 来 像 一 个 数组 ， 因 为 它 有 数字 键 和 一 个 长 
度 属性 。 然 而 ， 它 实际 上 不 是 一 个 数组 ， 试 图 对 它 调 用 map 或 任何 其 他 
的 数组 操作 符 都 不 起 作用 。 


警告 : Selenium 不 能 从 桌面 拖 动 文件 到 浏览 器 ， 因 此 也 没有 办 法 用 
Selneium 自动 测试 拖 慢 。 
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为 了 演示 本 章 介 绍 的 特性 如 何 协同 工作 以 实现 一 个 方便 的 文件 处 理 
接口 。 例 6-4 把 这 些 全 部 放 入 一 个 更 完整 的 示例 中 ， 这 将 Web 页 面 上 的 
一 个 区 域 设计 为 拖 上 忠 区 。 当 用 户 把 一 个 文件 放 到 拖 点 区 时 ， 它 将 被 打包 
到 FormData 对 象 ， 然 后 通过 XMLHttpRequest 对 象 上 传 。 这 个 函数 还 显 
示 了 一 个 进度 指示 器 ， 将 上 传 的 进度 反馈 给 用 户 。 


例 6-4: 上传 文件 





/*globalS, FormData,alert, document, XMLHttpRequest*/ 
/*jslint onevar: false,white: false*/ 

(function () { 

var toArray=function toArray(files) { 

var output=[]; 
for(var i=0, f; f=files[i]; i+=1){ 
output.push (f); 

} 
return output; 
}3 
var updateProgress=function (state) { 
var progress=S$ ('progress#progress') 
progress.attr('max', 100); 

if (state==='start') { 

return progress.fadeIn(500); 

} 
else if (state==='stop') { 
return progress. fadeOut ( 
} 
// 使 用 jQuery UI 进度 条 

return progress.attr('value', state); 
}; 
var uploadBlob=function uploadBlob (params) { 
var xhr=new XMLHttpRequest (); 
xhr.open('POST', params.url,true) ; 































































































500); 



































xhr.onload=params.success; 

// 监 听 上 传 进度 。 
xhr.upload.onprogress-params.progress; 
xhr.send(params.blob); 

return params; 

}; 

var fileupload=function fileupload() { 
var el=document.getElementBylId('dropzone'); 
var stopEvent=function (evt) { 
evt.stopPropagation(); 
evt.preventDefault (); 













































































el.addEventListener('dragover', stopEvent, false); 
el.addEventListener('drop', function(evt) { 
stopEvent (ev 七 ) ; 
var files-toArray(evt.dataTransfer.files); 
updateProgress('start'); 

var packageFiles=function (files) { 

var formData=new FormData(); 

files.map (function (file) { 
formData.append(file.fileName, file); 

return file; 

})s 

var block={ 

url: '/upload.php', 

success: function() { 
updateProgress('done'); 

}> 

progress: function (evt) { 
updateProgress (100* (evt.loaded/evt.total)); 
}> 

blob: formData 

}; 

return block; 

Fi 

uploadBlob (packageFiles(files)); 

}, false); 

pi 

// 运 行 设置 

fileupload(); 

} () ) ; 





























































































































自 先 创建 函数 toArray， 它 把 所 有 文件 名 打包 成 一 个 数组 。 紧 接着 的 
updateProgess 函 数 使 用 一 个 HTML 5 提供 的 新 进度 条 ， 这 将 在 第 10 章 


的 “应 用 标记 ”一 节 介 绍 。uploadBlob 函 数 代 码 与 例 6-3 的 代码 一 样 ， 
fileupload 函 数 也 使 用 例 6-3 的 代码 ， 加 上 了 一 些 例 6-2 的 代码 。 


Filesystem X. fF A £t 


浏览 器 允许 JavaScript 访 问 文 件 系统 的 想法 足以 让 任何 考虑 到 安全 问 
题 的 人 陷入 娩 懂 。 用 户 的 硬盘 驱动 右上 有 很 多 不 希望 浏览 器 访问 的 东 
西 。 

GoogleChrome 人 允许 JavaScript 访 问 用 户 计 算 机 上 的 沙 箱 文件 系统 。 
如 果 想 从 网 页 内 运行 FileSystem APLChrome 浏 览 器 必须 用 --unlimited- 
quota-for-files 标 记 启 动 。 不 过 ， 如 果 正 在 为 Google 的 网 上 商店 建立 一 个 
应 用 ， 那 么 可 以 通过 在 存储 清单 文件 中 指定 unlimitedStorage 访 问 这 个 
API. 





虽然 LocalStorage 和 IndexedDB 人 允许 JavaScript 程 序 在 数据 库 中 存储 对 
象 ， 但 是 FileSystem API 对 于 存储 大 型 二 进 制 对 象 非常 有 用 。 例 如 ， 如 
果 正 在 构建 一 个 视频 应 用 ， 在 文件 系统 上 处 理 图 像 可 能 会 对 存储 很 有 
用 。 其 他 用 例 可 以 包括 视频 流 、 上 有 具有 很 多 媒体 资源 的 游戏 、 图 像 编 辑 或 
音频 应 用 。 总 之 ， 这 个 接口 将 适合 于 任何 需要 在 本 地 短期 或 长 期 存储 大 
量 数 据 的 应 用 。 





注意 : 由 于 文件 系统 API 只 在 Chrome 浏 览 器 中 支持 ， 而 且 只 有 当 用 
户 加 载 一 个 受信 任 的 应 用 时 才 支 持 ， 这 有 点 超出 了 本 书 的 范围 。 在 
«Using the HTML 5 Filesystem APID 一 书 中 可 以 找到 完整 的 相关 知识 。 


TE73XR — 离线 处 理 





近来 人 们 使 用 互联 网 似乎 一 直 很 通畅 ， 但 是 ， 坦 率 地 说 不 是 这 样 。 
在 有 些 时 候 和 有 些 地 方 ， 即 使 最 先进 的 移动 设备 也 会 出 于 这 样 或 那样 的 
原因 离开 网 络 的 履 盖 范围 。 





第 4 童 着 眼 于 如 何 将 本 地 存储 的 数据 传递 给 浏览 器 ， 使 浏览 器 不 需 
要 访问 网 络 即 可 使 用 。 然 而 ， 如 果 疫 有 托管 应 用 的 web 页面， 再 方便 的 
数据 也 是 没有 用 的 。 


随 着 越 来 越 多 现代 的 应 用 进入 到 浏览 器 ， 能 够 随时 访问 该 软件 已 经 
变 得 至 关 重要 。 问 题 是 ， 标 准 的 Web 应 用 假定 Web 页 面 将 要 加 载 许多 组 
件 ， 包 括 JavaScript 源 代码 、HTML、 图 像 、CSS 等 。 为 了 用 户 能 够 在 没 
有 接 入 互联 网 时 利用 这 些 资源 ， 需 要 在 本 地 存储 这 些 文件 的 副本 ， 在 需 
要 的 时 候 供 浏 览 器 使 用 。HTML 5 让 程序 员 能 够 给 浏览 器 提供 一 个 要 加 
载 和 保存 的 文件 清单 。 即 使 是 没有 网 络 连接 到 服务 器 ， 浏 览 器 也 将 能 够 
访问 这 些 文 件 。 











即使 浏览 器 在 线 ， 清 单 中 列 出 的 文件 也 将 从 本 地 磁盘 加 载 。 从 而 使 
终端 用 户 体验 到 终极 内 容 交 付 网 络 。 


当 页 面 加 载 时 ， 只 要 浏览 喜 在 线 就 会 检查 服务 器 的 清单 文件 。 如 果 
清单 文件 已 更 改 ， 浏 览 器 将 尝试 重新 下 载 清 单 中 列 出 的 所 有 需要 下 载 的 


文件 。 一 旦 下 载 完 清单 中 的 所 有 文件 ， 浏 览 器 将 更 新 文件 缓存 以 显示 新 
的 文件 。 


ire A SCF fia] JP 


文件 离线 访问 是 由 Google 在 Gears 中 推出 的 一 项 功能 。 用 户 提供 了 
一 个 JSON 文 件 形式 的 清单 ， 可 以 引导 浏览 器 加 载 其 他 离线 请 求 的 文 
件 。 当 浏览 左下 次 访问 该 网 页 时 ， 文 件 将 从 本 地 磁盘 加 载 ， 而 不 是 从 网 
络 加 载 。 当 清单 文件 的 版 本 字段 被 更 新 时 ，Gears 会 检查 清单 中 所 有 文 
件 进行 更 新 。 











HTML 5 清单 的 想法 与 上 面 所 说 的 类 似 ， 但 在 实现 上 有 所 不 同 。 它 
的 一 个 好 处 是 ， 不 用 任何 JavaScript 代 码 就 可 以 在 应 用 中 实现 一 个 清单 ， 
但 是 Gears 中 需要 用 JavaScript 代 码 实 现 。 要 做 到 这 一 点 ， 需 要 在 文档 的 
<html> yid 7-1) 中 增加 manifest 属 性 来 包含 清单 文件 的 路 径 。 





例 7-1: HTML manifest 声 明 





<!DOCTYPE HTML> 
<html manifest="/cache.manifest"> 
<body> 











</body> 
</html> 





清单 文件 的 MIME 类 型 必须 为 text/cache-manifest。 可 以 通过 Web 服 
务 器 配置 文件 来 实现 。 设 置 Apache Web 服 务 器 的 MIME 类 型 ， 在 Apache 
的 配置 文件 中 添加 下 面 这 行 代 码 。 对 于 其 他 Web 服 务 器 ， 请 参考 相关 服 











务 器 的 文档 。 文 件 的 名 称 并 不 重要 ， 只 要 文件 有 正确 的 MIME 类 型 ， 但 
是 cache.manifest 似 乎 是 一 个 很 好 的 默认 选择 。 











AddType text/cache-manifest.manifest 





清单 文件 的 结构 


清单 文件 的 格式 其 实 非常 简单 。 第 一 行 必须 是 "CACHE 
MANIFEST."。 之 后 是 一 个 文件 列表 ， 每 行 一 个 ， 包 含 在 清单 中 《〈 见 例 
7-2) 。 注 释 可 以 用 井 号 〈#) 标注 。 


该 清单 将 缓存 HTTP GET 请 求 ， 而 POST、PUT 和 DELETE 仍 需 访 问 
网 络 。 如 果 页 面 有 一 个 活动 的 清单 文件 ， 所 有 的 GET 请 求 都 将 被 定向 到 
本 地 存储 。 但 对 于 某 些 文件 ， 离 线 访 问 没 有 意义 。 这 些 可 能 包括 各 种 服 
务 器 资源 ， 例 如 Ajax 调用 或 者 可 能 会 溢出 缓存 区 的 大 型 文档 集 。 这 些 文 
件 可 以 包含 在 清单 中 的 NETWORK 部 分 。NETWORK 部 分 的 所 有 URL 都 
将 绕 过 缓存 直接 从 服务 器 加 载 。HTML 5 的 清单 要 求 任何 清单 中 未 包含 
的 文件 选择 清单 以 外 的 办 法 。 趾 


在 其 他 情况 下 ， 可 能 希望 根据 用 户 是 否 在 线 提供 不 同 的 内 容 。 清 单 
为 每 个 资源 提供 了 一 个 FALLBACK 部 分 。 将 根据 浏览 器 是 否 连 接 到 互 
联网 ， 向 用 户 显 示 不 同 的 内 容 。FALLBACK 部 分 的 每 一 行 的 第 一 个 文 
件 用 于 当 连 接 可 用 时 从 服务 器 加 载 ， 第 二 个 文件 用 于 当 连 接 不 可 用 时 从 
本 地 加 载 。 


NETWORK 和 FALLBACK 部 分 都 是 列 出 文件 模式 ， 而 不 是 具体 的 
文件 。 因 此 可 以 在 这 里 列 出 整个 目录 或 URL 路 径 以 及 文件 类 型 ， 如 图 像 


(* jpg) 。 


例 7-2: 清单 文件 








CACHE MANIFEST 
#2010-10-1 
/index.php 
/js/jquery.js 
/css/style.css 
/images/logo.png 
NETWORK: 
/request.php 
FALLBACK: 
/about.html/o 














nd 














Fline-about.html 














1] HTML 5 中 ， 对 于 清单 中 未 包含 的 文件 ， 当 用 户 离线 时 不 加 载 ， 在 线 
时 从 服务 器 加 载 。 





更 新 清单 


清单 文件 本 和 号 一 经 改变 ， 浏览 器 束 会 更 新 清单 中 的 文件 。 有 几 种 方 
式 用 来 处 理 这 个 问题 。 可 以 在 文件 的 注释 中 增加 一 个 版 本 号 。 如 果 项 目 
使 用 了 一 个 与 Subversion 类 似 的 版 本 控制 ， 则 可 以 使 用 版 本 号 标记 来 解 


决 这 个 问题 。 





用 版 本 控制 系统 中 的 版 本 号 有 一 个 问题 ， 每 当 系 统 中 的 任意 文件 发 
生变 化 时 ， 程 序 员 都 得 记 着 更 新 文件 。 创 建 一 个 目 动 系统 ， 并 作为 部 嗜 
过 程 的 一 部 分 运行 该 脚本 要 好 得 多 。 只 要 清单 中 列 出 的 文件 有 变化 就 会 
目 动 更 新 清单 文件 。 























例如 ， 可 以 写 一 个 脚本 ， 检 得 清单 中 所 有 文件 的 变化 ， 然 后 当 其 中 
一 个 文件 变化 时 对 清单 文件 本 里 进 行 修改 。 一 个 简单 的 方法 是 写 一 个 脚 
本 ， 对 清单 中 的 所 有 文件 进行 循环 ， 然 后 对 每 一 个 做 MD5 校 验 ， 再 将 最 
后 的 校 验 放 入 manifest 文 件 。 这 将 确保 任何 更 改 都 会 引发 清单 文件 更 
新 。 





该 脚本 可 能 会 太 慢 而 不 能 从 Web 服 务 器 运行 ， 因 为 要 在 1s 内 运行 数 
百 次 很 困难 。 但 是 ， 它 可 以 有 效 地 运行 在 开发 环境 中 ， 可 以 选择 当 文 件 
保存 时 从 编辑 器 中 运行 ， 或 者 作为 版 本 控制 系统 中 检查 过 程 的 一 部 分 运 


行 。 





在 例 7-3 中 ， 对 清单 文件 进行 解析 ， 并 用 它 做 一 些 事情 。 该 程序 用 
Symfony Yaml Library (http://components.symfony-project.org/yaml) 类 
库 加 载 文 件 列表 作为 清单 使 用 。 另 外 ， 该 程序 首先 检查 有 没有 文件 重复 
加 入 。 还 会 检查 每 一 个 文件 是 否 存 在 ， 缺 少 文件 会 破坏 清单 。 脚 本 通过 
用 注释 在 文件 名 后 面 添加 每 个 文件 的 MD5， 确 保 任 何 文 件 的 更 新 都 会 引 
发 清 蛙 文件 的 变化 ， 以 便 浏览 器 更 新 其 内 容 。 数 据 文件 格式 如 例 7-5 所 
示 。 例 7-3 将 输出 一 个 清单 文件 ， 文 件 中 包含 一 个 MD5 Hash 作 为 注释 ， 
见 例 7-4。 








例 7-3: 上 自动 更 新 清单 文件 





<?php 

header ('Content-Type: text/cache-manifest'); 
echo ("CACHE MANIFEST\n") ; 
Sfiles=sfYaml: load('manifest.yml'); 
Shashes-''; 

Sfiles-unique (S$files); 
foreach(Sfiles-- cache as$file) 




































































{ 
if (file exists ($file)) 
{ 





echo$file."\n"; 

Shashes.=md5_ file($file); 

} 

} 

echo"NnNETWORK: Mn" 

foreach (Sfiles->network as$file) 
{ 

echo$file."\n"; 

} 

echo"\nFALLBACK: \n" 

foreach ($files->fallback as$file) 
{ 

echo$file."\n"; 

} 

echo"#HASH: ".md5(Shashes) ."\n"; 


















































例 7-4: 包括 MD5 Hash 的 清单 








CACHE MANIFEST 
index.html 
css/style.js 

js/jquery.js 

js/myscript.js 

NETWORK: 

network/file 

FALLBACK: 
/avatars//offline-avatars/offline.png 
#HASH: 090c7e8fe42c16777£0a844£835e839b 

































































例 7-5: 例 7-3 的 数据 








files: 
-index.html 
-css/style.css 
-js/jquery.js 
-js/myscript.js 
network: 
-network/file 
faillback: 
-/avatars//o 


























fline-avatars/offline.png 











警告 : 当 以 为 清单 应 该 非常 好 地 更 新 时 候 ， 它 不 一 定 总 是 
使 有 一 个 清单 的 新 版 本 ， 可 以 经 常 花 一 些 时 间 来 更 新 浏览 器 中 的 内 容 。 
除非 设置 缓存 控制 关 ， 否 则 浏览 器 要 在 最 后 下 载 完 几 个 小 时 后 才 会 再 次 
下 载 清 单 。 例 如 ， 确 保 缓存 控制 头 不 会 导致 浏览 器 每 隔 五 年 才 下 载 文 件 
或 使 用 ETag 头 ， 或 者 将 服务 器 设置 为 没有 缓存 头 ， 一 定 要 测试 好 。 


ST 


浏览 器 通过 清单 文件 加 载 页 面 时 ， 会 在 window.applicationCache 对 
象 上 触发 一 个 检查 事件 。 此 事件 将 检查 该 页 面 之 前 是 人 否 已 被 访问 过 








如 果 绥 存 之 前 尚未 下 载 ， 浏 览 右 驶 会 触发 一 个 downloading 事 件 ， 
并 开始 下 载 文件 。 如 果 清 单 文件 发 生 改 变 此 事件 也 会 触发 。 如 果 清 单 中 
没有 变化 ， 浏 览 右 将 触发 noupdate 事 件 。 


当 浏 览 器 下 载 文件 时 ， 会 引发 一 系列 progress 事 件 。 如 果 想 要 加 用 
户 提供 茶 种 形式 反 饿 ， 让 用 户 知 道 软件 正在 下 载 ， 可 以 使 用 这 些 事件 。 


一 旦 下 载 完 所 有 文件 ， 束 会 触及 cached 事 件 。 


如 果 出 现任 何 错误 ， 浏 览 器 将 触发 error 事 件 。 能 是 由 有 问题 的 
HTML 页 面 、 有 缺陷 的 清单 、 下 载 失 败 或 者 清单 中 列 出 的 任何 资源 下 载 
失败 造成 的 。 如 果 清 单 中 一 个 文件 缺少 ， 则 清单 中 的 任何 文件 都 不 会 下 
载 。 当 清单 正在 改变 的 情况 下 ， 如 果 有 一 个 坏 连接 ， 该 文件 的 旧版 本 将 
被 保留 。 在 新 清单 中 浏览 器 可 能 直接 忽略 该 清单 。 然 而 ， 可 能 不 是 所 有 
的 浏览 器 或 浏览 器 版 本 都 在 这 一 点 上 保持 一 致 。 用 自动 测试 验证 清单 中 
的 所 有 URL 是 一 个 好 主意 。 对 缓存 来 说 ， 这 可 能 是 一 个 非常 严重 的 错 
误 ， 因 为 几乎 没有 可 见 的 证 据 证 明 什 么 地 方 出 了 错 。 捕 捉 错 误 对 象 并 呈 
现 给 用 户 ， 作 为 对 坏 链接 自动 测试 的 某 种 形式 是 不 错 的 想法 。 











在 GoogleChrome 浏 览 器 中 ， 开 发 人 员工 具 





可 以 显示 清单 中 的 文件 列 


表 ( 见 图 7-1) 。 在 "Storage" 选 项 卡 下 的 "Application Cache" 子 项 将 显示 


各 项 目的 状态 。 
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警告 : 在 开发 过 程 中 关闭 清单 文件 ， 7 


用 ， 这 是 个 不 错 的 想法 。 如 果 变 化 不 能 


常 难以 开发 。 





Type 
Mastar 
Marttert 
Sapient 
Spidi 
Spidi 
Spisi 
Exphett 
Role 
Eom 
oid 
Exp heii 


Exp lel 
Spil 
Exptat 
Eun 
Sopbett 
Epit 
Epid 
Exp het 
E>pict 
Expiett 
Etat 
Exp idt 
Spidi 


Exp het 
Erben 
Spidi 
Epi 
Expte 
cap ett 
EapieH 
Ep helt 





Chrome i & A 3s 


当 项 目 准 备 使 用 时 才 启 


快速 出 现 ， 使 用 缓存 会 使 应 用 非 


调试 清单 文件 


清单 文件 向 特殊 的 调试 提出 了 挑战 。 它 可 能 是 儿 种 特殊 类 型 错误 的 





第 一 个 最 明显 的 错误 是 在 清单 中 包括 不 存在 的 文件 。 如 果 一 个 文件 
被 包含 在 页 面 中 但 是 在 清单 中 没有 ， 它 将 不 会 被 页 面 加 载 ， 同 样 ， 服 务 
器 上 缺少 的 文件 也 不 会 被 下 载 。 








许多 Selenium 测 试 不 会 明确 地 测试 正确 的 样式 和 显示 的 图 片 ， 因 此 
很 可 能 一 个 缺少 CSS 文 件 或 图 片 的 应 用 在 茶 种 程度 上 仍然 可 以 工作 ， 它 
通常 是 在 Selenium 中 测试 的 。 在 一 个 包括 来 自 外 部 Web 服 务 器 资源 的 应 
用 中 ， 这 些 也 必须 在 清单 文件 的 白 名 单 中 列 出 。 





在 一 些 浏览 器 中 ， 包 括 Firefox， 出 现 了 进一步 的 问题 ， 这 些 浏览 器 
中 清单 具有 了 选择 功能 。 因 此 Selenium 测 试 可 能 不 会 选择 它 ， 这 将 使 整 
个 测试 失去 实际 意义 。 为 了 在 Firefox 中 测试 ， 有 必要 建立 一 个 应 用 缓存 
可 以 默认 使 用 的 Firefox 配 置 文件 。 步 又 如 下 : 


1. 完 全 退出 Firefox。 


2. 从 命令 行 用 -profileManager 切 换 启动 Firefox。 这 样 会 出 现 一 个 如 
图 7-2 所 示 的 对 话 框 。 保 存 自 定义 配置 文件 。 











图 7-2 Firefox 自 定义 配置 对 话 框 


3. 重 新 启动 Firefox。 转 到 Firefox 的 选项 菜单 ， 选 择 "Advanced" 选 项 
卡 ， 在 下 面 选择 "Network" 选 项 卡 〈 见 图 7-3) ， 然 后 关闭 “ 当 一 个 网 站 要 
求 存储 数据 离线 使 用 时 ， 告 诉 我 ”选项 。 
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A 7-3 ”Firefox 选 项 


现在 ， 当 启动 Selenium RC 服务 器 时 ， 使 用 此 选项 : 

















java-jar selenium-server.jar-firefoxProfileTemplate 








Firefox 配 置 文件 的 完整 细节 参见 网 址 : http://support.mozilla.com/en- 


US 人 kb/Managing+profiles 。 


当 清 单 更 新 而 浏览 右 没 有 反映 该 更 新 时 ， 会 出 现 第 二 类 问题 。 通 名 
情况 下 ， 会 在 加 载 页 面 后 花费 一 两 分 钟 的 时 间 让 浏览 器 更 新 文件 缓存 ， 
并 且 直 到 页 面 加 载 完 成 浏览 右 才 会 检查 缓存 。 因 此 ， 如 果 服 务 器 被 更 
新 ， 浏 览 右 在 用 户 访问 该 页 面 之 前 将 不 会 有 新 的 版 本 。 如 有 果 在 服务 右上 
己 经 有 了 一 个 更 新 ， 就 会 引起 问题 ， 会 导致 浏览 右 中 的 应 用 失败 ， 例 如 
Ajax 协议 的 变化 。 





当 用 户 访 问 该 页 面 时 (当然 假设 该 浏览 右 在 线 ) ， 浏 览 器 会 从 服务 
需 上 获取 清单 文件 。 但 是 ， 如 采 清 单 文 件 中 设置 了 一 个 缓存 控制 头 ， 浏 
览 髓 可 以 不 检查 清单 的 新 版 本 。 例 如 ， 如 果 文 件 中 有 一 个 头 ， 声 明 浏 览 
需 应 该 一 年 只 检查 一 次 更 新 《Web 服 务 器 上 有 时 很 常见 ) ， 浏 览 右 将 不 
会 重新 载 入 清单 文件 。 所 以 确保 清单 文件 本 身 不 航 浏 览 需 缓存 是 非常 重 
要 的 ， 或 者 如 果 它 被 缓存 了 也 只 能 通过 一 个 ETag 来 实现 。 








浏览 器 可 以 通过 给 URL 附 加 一 个 查询 字符 串 cache.manifest?l0ad=1 以 
阻止 缓存 清单 文件 。 如 果 清 单 文件 是 一 个 静态 的 文本 文件 ， 碍 询 字 符 串 
将 被 急 略 ， 但 浏览 器 不 知道 ， 浏 览 器 将 要 求 服 务 器 发 送 一 个 新 的 副本 。 


不 同 的 Web 浏 览 费 甚至 一 个 浏览 如 的 不 同 版 本 对 清单 文件 的 更 新 都 





会 有 所 不 同 。 因 此 在 使 用 一 个 清单 文件 时 ， 非 常 仔 细 地 对 任意 应 用 进行 
跨 不 同 浏览 器 和 浏览 器 版 本 测试 是 非常 重要 的 。 





第 8 章 ”把 工作 分 割 成 Web Worker 


JavaScript 自 有 史 以 来 一 直 以 单线 程 运 行 。 这 对 小 应 用 是 可 行 的 ， 但 
现在 随 着 应 用 越 来 越 大 ， 它 变 得 很 局 限 。 随 着 运行 的 JavaScript 越 来 越 
多 ， 应 用 开始 阻塞 等 待 代码 执行 完成 。 














JavaScript 从 一 个 事件 循环 运行 代码 ， 该 循环 从 浏览 器 中 已 发 生 的 所 
有 事件 队列 中 提取 事件 。 一 旦 JavaScript 运 行 时 闲置 下 来 ， 就 会 取出 队列 
中 的 第 一 个 事件 ， 并 执行 啊 应 该 事件 的 处 理 程序 〈 见 图 8-1) 。 只 要 这 
些 处 理 程序 快速 运行 ， 就 能 制造 出 应 答 的 用 户 体验 。 








Events 


je) 


图 8-1 事件 循环 


在 过 去 的 几 年 中 ， 浏 览 器 之 间 的 苋 争 一 直 围 绕 着 JavaScript 的 速度 。 
在 Chrome 和 Firefox 中 ，JavaScript 现 在 的 运行 速度 要 比 以 前 它 在 IE6 中 的 
速度 快 多 达 一 百倍 。 因 此 ， 它 可 以 在 事件 循环 中 加 入 更 多 代码 。 





值得 庆幸 的 是 ，JavaScript 做 大 多 数 事情 的 速度 都 很 快 。 往 往 是 按 顺 


序 操纵 一 些 数据 ， 并 传递 给 DOM 或 进行 Ajax 调用 。 所 以 图 8-1 的 模型 工 
作 得 很 好 。 对 于 那些 需要 花费 比 几 分 之 一 秒 更 长 的 时 间 计 算 的 事情 ， 有 
一 些 技巧 可 以 防止 计算 瓶颈 影响 用 户 体验 。 








一 个 主要 的 技巧 是 把 计算 分 割 成 多 个 小 步骤 ， 并 在 队列 中 将 每 个 步 
又 作为 独立 的 工作 运行 。 每 一 步 随 着 下 一 个 步骤 的 调用 而 结束 ， 其 间 进 
行 短暂 延迟 〈Ll100s) 。 这 可 以 防止 任务 锁定 事件 队列 。 但 是 因为 它 将 
任务 调度 的 工作 留 给 了 程序 员 ， 而 有 效 地 实现 这 个 解决 方案 也 需要 付出 
很 大 的 努力 ， 因 此 仍然 从 根本 上 不 合格 。 











如 采 时 间 步 长 太 短 ， 计 算 可 能 仍 会 堵塞 事件 队列 ， 并 导致 其 他 任务 
延 后 。 昌 然 任 务 仍然 会 发 生 ， 但 是 因为 系统 没有 马上 回应 点 击 和 其 他 用 
户 可 见 的 行为 ， 用 户 会 感觉 到 滞后 。 另 一 方面 ， 如 果 行 动 之 间 的 步骤 太 
大 ， 计 算 将 需要 很 长 的 时 间 来 完成 ， 导 致 用 户 需 要 等 竺 结果 返回 。 








GoogleGears 创 建 了 “Worker 池 ”的 思路 ， 现 在 已 经 转化 成 HTML 5 
Web Worker。 接 口 有 所 不 同 ， 但 基本 思路 相同 。 一 个 Worker 是 一 个 单 
独 的 JavaScript 程 序 ， 可 以 执行 计算 、 回 传 信 息 并 往返 于 主 程序 和 其 他 
Worker 之 间 。Web Worker 不 同 于 Java 或 Python 中 的 线程 ， 设 计 的 一 个 关 
键 方面 是 : 没有 共享 的 状态 。Worker 和 主要 的 JavaScript 实 例 只 能 通过 
传递 消息 进行 通信 。 





这 一 区 别 导致 一 些 关 键 的 编程 实践 大 多 比 线程 编程 简单 。Web 


Worker 不 需要 互 斥 、 锁 定 或 同步 ， 不 会 出 现 死 锁 和 竞争 条 件 。 这 也 意味 
着 可 以 使 用 大 量 的 JavaScript 包 ， 不 用 担心 它们 是 否 是 线程 安全 的 。 浏 览 
器 的 JavaScript 环 境 唯一 的 变化 是 一 些 新 的 方法 和 事件 。 


每 个 Worker (包括 主 窗口 ) 维持 一 个 独立 的 事件 循环 。 每 当 没 有 代 
人 码 运行 时 ，JavaScript 运 行 时 返回 到 事件 循环 。 这 时 运行 时 将 取出 队列 中 
的 第 一 条 消息 。 如 果 队 列 中 没有 事件 ， 它 会 等 待 ， 直 到 一 个 事件 到 达 ， 
然后 处 理 它 。 如 果菜 些 代码 正在 长 时 间 运 行 ， 将 一 直到 这 段 代 码 完成 后 
才 会 处 理事 件 。 





这 将 在 主 窗 口中 导致 浏览 器 的 用 户 界面 锁定 。 (有 些 浏览 器 提供 将 
JavaScript 停 止 在 这 一 点 上 的 文 持 。) 在 一 个 Worker 中 ， 一 个 较 长 的 任 
务 将 阻止 Worker 接 收 任何 新 的 事件 。 但 主 窗口 和 任何 其 他 Worker 将 继续 
t] o 


然而 ， 这 种 设计 的 选择 给 Worker 进 程 本 身 附 加 了 一 些 约束 。 首 先 ， 
Worker 没 有 访问 DOM 的 权限 。 这 也 意味 着 当 Firebug 与 JavaScript 通 过 
DOM 通 信 时 ，Worker 不 能 使 用 Firebug 的 控制 台 界 面 。 最 后 ，JavaScript 
调试 器 不 能 访问 Worker， 因 此 没有 办 法 逐步 调试 代码 或 者 做 那些 调试 器 
中 通常 能 完成 的 其 他 事情 。 


Web Worker 用 例 





在 网 络 上 运行 的 各 类 传统 应 用 程序 以 及 网 页 浏览 器 环境 的 限制 ， 限 
制 了 调用 Web Worker 的 计算 需求 。 直 到 最 近 ， 大 多 数 Web 应 用 程序 能 操 
纵 少 量 的 数据 ， 主 要 包括 文字 和 数字 。 在 这 些 情况 下 ， 有 限 地 使 用 Web 
Worker 的 构造 类 型 。 现 在 ，JavaScript 被 要 求 做 更 多 的 事情 ， 许 多 常见 
的 情况 可 以 从 繁衍 的 新 任务 中 受益 。 





图 像 


HTML 5f <svg> I< canvas > HJER iE VF JavaScript (FAA, Al 
像 处 理 是 一 个 潜在 的 繁重 的 计算 任务 。 虽 然 自 1993 年 Mosaic 浏 览 器 发 布 
以 来 ，Web 浏 览 右 已 经 能 够 显示 图 像 ， 但 是 浏览 右 依 旧 无 法 操作 这 些 图 
像 。 如 果 一 个 web 程 序 员 想 取 一 个 图 像 进行 扭 曲 、 透 明 琶 加 等 ， 不 能 在 
浏览 器 中 进行 。 在 <img> 标 记 中 ， 所 有 的 浏览 器 可 以 做 的 只 有 通过 改 
变 src 属 性 蔡 换 一 个 不 同 的 图 像 ， 或 改变 显示 图 像 的 大 小 。 然 而 ， 浏 览 器 
没有 办 法 知道 图 像 是 什么 ， 或 访问 组 成 图 像 的 元 数据 。 











最 近 加 入 的 和 canvas 之 标记 将 一 个 已 有 的 图 像 导 入 到 画布 上 ， 并 将 
元 数据 导出 到 JavaScript 中 处 理 ， 只 要 图 片 是 从 页 面 所 在 的 同一 台 服 务 器 
上 加 载 的 ， 也 可 以 从 HTML 5 二 video 二 标记 的 一 个 视频 中 导出 一 帧 。 UU 





从 图 形 中 提取 出 数据 ， 可 以 把 它 传递 给 一 个 Worker 进 行 处 理 。 这 可 
用 于 做 任何 事情 ， 从 清理 图 像 到 对 科学 数据 集 做 傅 里 叶 变 换 。Canvas 使 
得 构建 复杂 图 片 ， 通 过 各 种 用 JavaScript 编 写 的 过 滤器 编辑 成 为 可 能 ， 应 
该 经 常 使 用 Web Worker 以 获得 更 好 的 性 能 。 





[1] HTML 5 图 像 的 更 多 信息 《HTML 5 Canvas》 ， 作 者 Steve Fulton 


和 Jeff Fulton (O'Reilly) 。 


地 图 


除了 图 形 以 外 ，JavaScript 现 在 还 有 可 以 用 于 处 理 地 图 数据 的 API。 
可 以 从 互联 网 导入 地 图 ， 并 找 出 用 户 的 当前 位 置 ， 通 过 地 理 信 息 可 以 实 
现 广 泛 的 网 络 应 用 服务 。 


假设 在 移动 浏览 器 中 构建 了 一 个 路 线 查 找 应 用 。 拿 出 电话 ， 告 诉 它 
想 要 去 “特拉维夫 国王 乔治 大 街 14 号 ”， 然 后 让 浏览 器 找 出 你 所 在 的 位 
置 ， 指 出 到 最 近 公共 汽车 站 的 路 线 ， 并 告诉 你 应 该 从 拉 马 特 甘 的 销 石 区 
乘 82 路 公交 车 到 达 那 里 ， 应 该 是 不 错 的 体验 。 


该 软件 更 复杂 的 版 本 可 以 检查 交通 状况 ， 告 诉 你 一 个 不 同 的 公交 
车 ， 虽然 可 能 走 绕 远 一 点 的 路 线 ， 而 且 离 目的 还 有 一 段 距离 需要 步行 
但 可 能 会 更 快 到 达 ， 因 为 错开 了 主要 交通 拥堵 。 








使 用 Web Worker 


要 启动 一 个 Web Worker， 创 建 一 个 新 的 Worker 对 象 ， 并 传递 包含 
该 代码 的 文件 作为 调用 的 参数 〈 见 例 8-1) 。 下 面 的 代码 将 从 源 文 件 创 
建 一 个 Worker。 


例 8-1: Worker 示 例 





$ (document) .ready (function () { 

var worker=new Worker('worker.js'); 
worker.onmessage=function (event) { 
console.info(event); 

Ji 
worker.postMessage ("World"); 


)): 




















浏览 器 加 载 该 Worker， 运 行 所 有 不 在 事件 处 理 程序 中 的 代码 ， 然 后 
局 动 事件 循环 等 待 事件 。 要 关注 的 主要 事件 是 message 事 件 ， 它 定义 了 
发 送 数据 到 worker 的 方法 。 主 线程 通过 调用 postMessage 函 数 发 送 
message 事 件 ， 将 传送 的 数据 作为 参数 。 





来 自主 线程 的 数据 保存 在 event.data 字 段 中 。Worker 应 Message() 方 
法 读 取 这 些 数据 。 


Worker? 3$ 


Web Worker 运 行 在 一 个 非常 小 的 环境 中 。 缺 少许 多 浏览 右 中 熟悉 的 
对 象 和 JavaScript 接 口 ， 包 括 DOM、 文 档 对 象 、 窗 口 对 象 。 


除了 标准 ECMA 脚 本 对 象 外 ， 如 字 String、Array 和 Date， 还 有 下 列 
对 象 和 接口 对 Web Worker 可 用 : 


:navigator 对 象 包含 四 个 属性 : appName、appVersion、userAgent 和 


platform. 
location 对 象 的 所 有 属性 为 只 读 。 
self 对 象 就 是 Worker 对 象 本 身 。 
'importScripts() 77 7X - 
.XMLHttpRequest 接 口 用 于 Ajax 方法 。 
“setTimeout() 和 setInterval()。 
close() 方 法 用 于 结束 worker 进 程 。 


也 可 以 使 用 ECMAScript5 JSON 接 口 ， 因 为 它们 是 语言 的 一 部 分 而 
不 是 浏览 器 的 一 部 分 。 此 外 ，Worker 可 以 用 importScripts(0) 方 法 从 服务 器 
导入 库 脚本 。 该 方法 的 参数 为 要 加 载 的 一 个 或 多 个 文件 列表 ， 与 主 用 户 
界面 线程 中 使 用 的 script> 标 记 具 有 相同 的 效果 。 与 JavaScript 中 的 大 
多 数 方法 不 同 ，importScripts 是 阻塞 式 的 ， 直 到 列 出 的 所 有 脚本 加 载 完 





成 后 该 函数 才 会 返回 。importScripts 将 根据 指定 的 命令 顺序 执行 加 载 的 
MF 


虽然 localStorage 和 sessionStorage 不 能 从 Web Worker 访 问 ， 但 是 
IndexedDB 数 据 库 可 以 〈 见 第 5 章 ) 。 此 外 ，IndexedDB 规 范 规 定 可 以 在 
Web Worker 中 《而 不 是 在 主 窗口 中 ) 使 用 阻塞 调用 表单 。 因 此 ， 在 
Worker 使 用 IndexedDB 操 作 数据 的 情况 下 ， 把 新 的 数据 加 载 到 数据 库 
中 ， 然 后 发 送 一 个 "updated" 消 息 到 主 窗口 或 其 他 Worker， 让 它们 知道 以 
便 采 取 任 何必 要 的 行动 。 





Worker 通 信 





Worker 相 关 的 主要 事件 是 message 事 件 ， 从 主要 JavaScript 环 境 中 的 
postMessage 方 法 向 Worker 发 送 传递 信息 。 在 Firefox 中 ， 可 以 传递 复杂 的 
JavaScript 对 象 。 然 而 ， 有 些 版 本 的 Chrome 和 Safari 只 支持 简单 的 数据 ， 
如 字符 串 、 布 尔 和 数字 。 一 个 很 好 的 思路 是 将 所 有 数据 编码 成 JSON， 
再 发 送 到 一 个 Web Worker。 


Worker 可 以 通过 同一 个 postMessage 方 法 将 数据 发 送 回 主线 程 。 通 
过 worker.onmessage 处 理 程序 接收 回 主线 程 。 


Worker 的 通信 模型 是 创建 Worker 的 主要 任务 ， 然 后 来 回 传递 消息 ， 
如 图 8-2 所 示 。 





已 


a 


Web Worker J% zr Mil 


{|8-1 Web Worker 的 "Hello World" 示 例 ， 它 调用 了 一 个 更 为 复杂 
的 例子 。 图 8-3 显 示 了 一 个 Web Worker 中 计算 的 Mandelbrot 集 的 视觉 交 
末 。 这 里 ， 该 Worker 和 主线 程 对 工作 进行 了 分 割 以 绘制 雁 形 。Worker 完 
成 了 Mandelbrot 集 的 实际 计算 工作 ， 而 前 端 脚本 则 获取 原始 数据 ， 并 显 
示 在 画布 上 。 














图 8-3 Mandelbrot] 


前 端 脚本 《〈 见 例 8-2) 创建 canvas 元 素 ， 并 进行 缩放 使 其 适合 页 面 。 
然后 ， 创 建 一 个 对 象 包装 Worker 接 口 。 包 装 器 对 象 在 包装 器 的 run() 方 法 
中 创建 Worker， 传 递 给 Worker 一 个 参数 块 ， 告 诉 它 要 计算 哪 一 块 
Mandelbrot 集 。 


draw 方 法 提取 数据 ， 进 行 缩放 使 它 适 合 国 布 大 小 ， 设 置 一 种 颜色 ， 
然后 绘制 像素 。 


注意 : HTML Canvas 没 有 绘制 像素 的 命令 ， 因 此 要 绘制 一 个 像素 ， 


必须 绘制 一 个 大 小 为 1 的 方块 ， 并 且 从 目标 显示 位 置 偏 移 半 个 像素 。 因 
此 ， 要 在 (20, 20) 点 处 绘制 一 个 像素 ， 它 应 该 是 在 (19.5, 19.5) ~ 
(20.5，20.5) 。 在 画布 网 格 上 的 位 置 不 是 屏幕 上 的 像素 ， 而 是 在 它们 


之 间 的 点 。 


然后 onMessage 处 理 程 序 ， 等 待 要 从 Worker 发 送 的 事件 。 如 果 事 件 
类 型 是 draw， 处 理 程序 将 调用 该 方法 在 画布 上 绘制 新 的 数据 。 如 果 事 件 
是 log， 通 过 console.info() 记 录 到 JavaScript 控 制 台 。 为 记录 Worker 的 状态 
音 息 提供 了 一 个 非常 简单 的 方法 。 








startWorker 将 this 赋 值 给 一 个 局 部 变量 ， 别 名 为 that。 这 是 因为 this 不 
像 其 他 的 JavaScript 变 量 受 语法 作用 域 限制 。 要 让 内 部 函数 访问 需要 绘制 
一 个 像素 的 对 象 ， 有 必要 将 它 的 别名 命名 为 一 个 语法 作用 域内 的 变量 。 


按照 惯例 ， 该 变量 通常 被 命名 为 that。 





例 8-2: MandelbrotHi| ti 








var drawMandelSet-function drawMandelSet () { 
var mandelPanel-$('body'); 

var width=mandelPanel.innerWidth(); 

var height=mandelPanel.innerHeight (); 

var range=[{ 




















S('canvas#fractal') .height (height+100) ; 
$('canvastfractal').width (width-50); 


























var left=0; 

var top=0; 

var canvas=S$ ("canvas#fractal") [0]; 

var ctx=canvas.getContext ("2d"); 

var params={ 

range: range, 

startx: 0.0, 

starty: 0.0, 

width: width, 

height: height 

B 

var y array=[]; 

var worker={ 

params: params, 

draw: function draw (data) { 
data.forEach(function d(point) { 

if (this.axis.x[point.drawLoc.x]===undefined) { 
this.axis.x[point.drawLoc.x]=point.point.x; 




























































































} 
if(this.axis.y[height-point.drawLoc.y]---undefined)( 
this.axis.y[height-point.drawLoc.y]-point.point.y:; 
} 

ctx. fil1Style=pickColor (point.escapeValue) ; 
ctx.fillRect(point.drawLoc.x-*0.5, 
height-point.drawLoc.y+0.5, 1, 1); 

te this); 

}> 

axis: { 

x5 

y: []» 








find: function (x,y)í 

return new Complex(this.x[x], this.y[yl): 
)» 

reset: function (){ 

this.x=[], this.y=[]; 

} 

)» 

myWorker: false, 

run: function startWorker (params) { 
this.myWorker=new Worker ("js/worker.js"); 
var that=this; 
this.myWorker.postMessage(JSON.stringi1 
this.myWorker.onmessage-function (event) 
var data=JSON.parse (event.data); 

if (data.type==='draw'){ 
that.draw(JSON.parse(data.data)): 
} 


else 
































y (params) ) ; 
{ 


























if (event.data.type==='log') { 
console.info(event); 





}; 

worker.run (params) ; 

return worker; 

}; 

$ (document) .ready (drawMandelSet); 
Function.prototype.createDelegate=function createDelegate (scope) { 
var fn=this; 

return function () { 

fn.call(scope,arguments) ; 

Fi 

Js 

function pickColor (escapeValue){ 

if (escapeValue===Complex.prototype.max iteration) { 
return"black"; 

} 

var tone-255-escapeValue*10; 

var colorCss="rgb({r}, {g}; {b})".populate ({ 
























































r: tone, 
g: tone, 
b: tone 


})s 

return colorCss; 

} 

String.prototype.populate-function populate (params) { 

var str=this.replace(/\{\wt\}/g,function stringFormatInner (word) { 
return params [word.substr (1, word.length-2)]:; 

})s 


return str; 



































Worker 本 身 实际 很 简单 〈 见 例 8-3) 。 它 只 是 加 载 了 其 他 一 些 文 


件 ， 然 后 等 待 一 个 从 用 户 界 面 发 来 的 消息 。 当 收 到 一 个 消 恕 时 ， 开 始 计 


例 8-3: Mandelbrot 计 算 








importScripts('function.js', 'json2.js', 'complex.js', 'computeMand 

'buildMaster.js'); 

onmessage=function (event) { 

var data=typeof event.data==='string'?JSON.parse(event.data): 
event.data; 

buildMaster (data) ; 

K 


























生成 函数 〈 见 例 8-4) 对 Mandelbrot 集 合 中 的 点 网 格 进行 循环 ， 计 算 
每 个 点 的 转 义 值 〈 见 例 8-5) 。 每 计算 200 点 后 ， 生 成 函数 发 送 其 计算 结 
果 到 主线 程 进行 绘图 ， 然 后 归 零 其 计算 点 的 内 部 缓冲 区 。 此 方式 不 是 等 
符 整 个 网 格 一 次 性 绘制 ， 用 户 能 看 到 疼 像 逐步 生成 。 


例 8-4: Mandelbrot 生 成 





var chunkSize=200; 
function buildMaster (data) { 
var range=data.range; 
var width=data.width; 
var height=data.height; 
var startx=data.startx; 
var starty=data.starty; 
var dx-(range[1].x-range[0].x)/width; 
var dy-(range[1].y-range[0].y)/height; 
function send(line) { 
var lineData=JSON.stringify(line.map (function 
makeReturnData (point) { 
return { 
drawLoc: point.drawLoc, 
point: point.point, 
escapeValue: point.point.mandelbrot() 
K 
})); 
var json=JSON.stringify({ 
type: 'draw', 
data: lineData 
)): 
postMessage(json); 
}3 


function xIter(x,maxX, drawX) { 
























































var line=[]; 

var drawY=starty; 
var y=range[0].y; 
var maxY-range[l].y: 
while (y<maxyY) { 











if (line. length%chunkSize===chunkSize-1) { 
send (line); 

line=[]; 

} 

var pt={ 


point: new Complex(x,y)> 
drawLoc: { 

x: drawX, 

y: drawY 

} 

F; 

line.push (pt); 

yt=dy; 

drawYt=1; 

} 
send (line); 

if (x<maxX& &drawX<width) { 

Iter.defer(1, this, [x+dx,maxX,drawX+1]); 

















Iter (range[0].x,range[1].x,startx) ; 








此 应 用 的 最 后 一 部 分 是 Mandelbrot 集 合 的 实际 数学 计算 ， 如 例 8-5 所 
示 。 此 功能 用 一 个 while 循 环 实现 而 不 是 一 个 纯 函 数 〈 见 第 2 章 的 “函数 式 
编程 >) ， 因 为 JavaScript 不 支持 尾 递归 。 用 一 个 递归 函数 实现 更 酷 ， 但 
将 有 可 能 导致 堆栈 溢出 。 





例 8-5: Mandelbrot 计 算 








Complex.prototype.max iteration=255*2; 
Complex.prototype.mandelbrot=function () { 
var x0=this.x; 

var yO-this.y: 

var x=x0; 





























var y=y0; 

var count; 

var X » y; 

var max iteration-this.max iteration; 
function inSet (x,y) { 

return x*xty*y<4; 

} 

count=0; 

while (count<max_iteration& &inSet (x,y) ) { 
x =x*x-y*y+x0; 

y -2*x*ytyO; 

count+=1; 

X-X 3 

y=y_3 

} 

return count; 


}s 











当 Worker 正 在 进行 Mandelbrot 集 合计 算 时 ， 其 主要 事件 循环 被 阻 
塞 。 所 以 UI 进程 不 可 能 发 送 给 它 一 个 新 的 计算 任务 ， 或 者 更 准确 地 说 ， 
Worker 将 不 接收 新 的 任务 ， 直 到 完成 当前 任务 。 





要 中 断 或 改变 Worker 的 行为 ， 例 如 ， 要 让 用 户 在 用 户 界面 中 选择 绘 
制 Mandelbrot 集 合 的 那个 区 域 ， 然 后 要 求 Worker 绘 制 该 区 域 ， 有 几 种 方 
法 可 以 实现 。 


最 简单 的 方法 是 终止 该 Worker 并 创建 一 个 新 的 。 这 有 一 个 优点 ， 新 
的 Worker 以 干净 的 状态 开始 ， 没 有 之 前 运行 的 Worker 遗 留 下 来 的 东西 。 
另 一 方面 ， 这 也 意味 着 Worker 必 须 从 头 开始 加 载 所 有 的 脚本 和 数据 。 
此 ， 如 果 Worker 的 启动 时 间 很 长 ， 这 可 能 不 是 最 好 的 办 法 。 





第 二 种 方法 稍微 复杂 一 些 : 通过 程序 手动 管理 任务 队列 。 在 主线 程 





中 或 包含 一 个 数据 块 列表 的 Worker 中 计算 数据 结构 。 当 一 个 Worker 需 要 
任务 时 ， 它 可 以 发 送 一 个 消息 到 该 队列 对 象 ， 让 它 发 送 一 个 任务 。 这 种 
创建 更 复杂 ， 但 有 几 个 好 处 。 首 先 ， 在 应 用 需要 做 不 同 的 事情 时 ， 
Worker 并 不 需要 重新 启动 。 其 次 ， 多 许 使 用 多 个 Worker。 当 需要 问题 的 
下 一 部 分 时 ， 每 个 Worker 可 以 查询 队列 管理 器 。 

















也 可 以 让 主任 务 按 顺序 发 送 大 量 的 事件 给 Worker。 然 而 ， 这 样 做 有 
一 个 问题 ，JavaScript 没 有 办 法 清除 事件 队列 。 因 此 ， 使 用 这 样 一 个 可 以 
管理 的 作业 队列 ， 似 乎 是 最 好 的 办 法 。 在 下 一 节 ， 我 们 将 探讨 这 一 解决 
Ti Fe 

没有 规定 一 个 应 用 中 只 能 用 一 个 网 络 Web Worker. JavaScripti A 


意 让 用 户 启 动 合理 数量 的 Worker。 当 然 ， 这 只 有 妆 问 题 可 以 很 容易 地 分 
割 成 几 个 Worker 时 才 有 意义 ， 很 多 问题 都 可 以 做 到 这 一 点 。 





每 个 Worker 是 一 个 独立 的 构造 ， 因 此 可 以 用 同样 的 源 代 码 创 建 多 个 
Worker， 或 者 创建 多 个 独立 工作 的 Worker。 


Worker 是 JavaScript 中 合理 的 重大 结构 ， 因 此 为 一 个 给 定 任务 创建 
十 个 以 上 Worker 可 能 是 一 个 坏 主意 。 然 而 ， 最 佳 数 量 可 能 要 根据 用 户 的 
浏览 器 和 硬件 以 及 要 执行 的 任务 来 确定 。 








测试 和 调试 Web Worker 


在 过 去 十 多 年 里 ，JavaScript 调 试 工具 已 经 变 得 相当 不 错 。Firebug 
和 Chrome 开 发 者 工具 都 是 一 流 的 调试 工具 ， 可 以 用 来 测试 JavaScriptY 
用 。 遗 憾 的 是 ， 它 们 不 能 访问 Web Worker 中 运行 的 代码 。 因 此 只 能 设置 
断 点 或 按 步调 试 Worker 中 的 代码 。Worker 也 不 能 在 列表 中 显示 出 现在 
Firebug 和 Chrome 相 应 script 标 记 中 的 已 加 载 脚本 。Selenium 或 QUnit 测 试 
也 不 能 直接 测试 在 Web Worker 中 运行 的 Worker 代 码 。 


Worker 中 的 错误 被 报告 给 Firefox 和 Chrome 的 控制 台 。 当 然 ， 在 许 
多 情况 下 ， 知 道 错误 发 生 在 哪 一 行 和 哪 一 个 文件 没有 太 大 帮助 ， 因 为 实 
际 的 错误 可 能 在 别处 。 


Chrome 没 有 为 程序 员 提 供 调 试 Web Worker 的 方法 。Chrome 开 发 者 
工具 "script" 面 板 包 含 一 个 "Web Workers" 复 选 枉 。 此 选项 会 让 Chrome 用 


iframe 模 拟 一 个 Worker。 


多 线程 复 用 模式 








可 以 使 用 Web Worker 从 用 户 浏览 器 任务 中 取出 复杂 的 任务 ， 为 程序 
员 提 供 强大 的 力量 。Firefox 目 3.5 版 本 开始 文 持 WorkerChrome 从 4.0 版 本 
开始 支持 Woker。 同 样 ，Safari 和 Opera 也 从 某 个 时 间 开 始 支持 Worker。 
然而 ， 截 至 目前 微软 Internet Exporer 还 不 支持 Web Worker 〈 虽 然 它 可 能 
会 在 IE10 中 出 现 ) ，iOS 上 的 Safari 中 也 不 支持 Web Worker， 因 此 


iPad/iPod/iPhone 平 台 不 可 能 支持 Worker。 





理想 的 方法 是 用 一 个 类 库 ， 使 程序 员 能 将 要 运行 的 代码 抽象 成 一 个 
函数 或 模块 ， 用 最 佳 的 方式 在 后 台 自 动 运行 这 些 代码 ， 要 么 是 当 Web 
Worker 可 用 时 ， 要 么 通过 setTimeout 方 法 。 此 外 ， 这 个 类 库 应 该 能 够 提 
供 一 套 通用 的 接口 ， 用 于 各 种 交互 ， 如 将 一 条 消息 发 回 主 应 用 。 





这 样 的 类 库 应 该 用 功能 检测 获取 要 运行 代码 的 版 本 ， 而 不 是 用 浏览 
器 检测 。 虽 然 现 在 有 的 浏览 器 支持 Web Worker 有 的 不 支持 ， 但 是 将 来 会 
改变 这 种 状况 ， 而 且 类 库 应 该 能 够 在 这 些 变 化 出 现时 仍 能 工作 。 





此 模式 下 实际 工作 的 函数 将 以 运行 状态 为 参数 重复 调用 ， 完 成 任何 
它 需 要 做 的 处 理 ， 并 返回 一 个 修改 后 的 状态 参数 ， 用 于 再 次 调用 直到 完 
成 工作 ， 然 后 调用 stop0 方 法 或 以 其 他 方式 中 断 。run 函 数 〈 见 例 8-6〉 应 
作为 一 个 纯 函数 处 理 ， 它 应 该 只 处 理 其 输入 并 返回 一 个 值 ， 而 不 会 对 全 





局 状态 的 变化 有 任何 影响 ， 根 据 它 是 否 作为 一 个 Worker 运 行 ， 将 有 一 套 
不 同 的 接口 集 可 用 。 


例 8-6: Run 








(function () 

{ 

runner.setup (function (state) 

{ 

this.postMessage({state: state}); 
return{ 

time: state.timet+=1 

}; 
Pt 


time: 0 














当 Worker 运 行 时 〈 见 例 8-7) ，run 函 数 可 以 从 一 个 标准 循环 的 内 部 
和 运行。 该 系统 通过 一 些 初 始 参数 调用 postMessage， 然 后 将 它们 作为 初始 
状态 传递 给 run 方 法 。 该 方法 将 通过 while 循 环 反复 调用 ， 直 到 它 调 用 
stop 函 数 ， 状 态 将 在 这 一 点 发 回 主 消 忆 。 


例 8-7: 用 Web Worker 运 行 函数 





var runner= 

{ 

stopFlag: false, 

postMessage: function (message) 
{ 
self.postMessage (message) ; 
}> 

stop: function () 

{ 

this.stopFlag=true; 

















) 

error: function (error) 

{ 

this.stopFlag=true; 

} ， 

setup: function(run) 

{ 

this.run=run; 

var that=this; 

self.onmessage-function message (event) 
{ 
that.execute (JSON. parse (event.data) ) ; 
}; 

) 

execute: function(state) 

{ 

var that=this; 

setTimeout (function runIterator() 









































that.state=that.run.apply(that, [that.state]); 
if (that.stopFlag) 























that.postMessage(that.state); 


else 
{ 
that.execute(); 


J 
, 16); 





function() 


} 
} 
}s 
( 
{ 





runner.setup (function (state) 
{ 

var newstate=state; 

//modify newstate here 
return newstate; 

ht 

time: 0 

)): 

0O); 














当 浏 览 器 的 Web Worker 不 可 用 时 ， 这 个 函数 应 该 以 短 时 间 重 复 超时 





的 方式 运行 ， 而 不 是 放 在 while 循 环 中 《〈 见 例 8-8) 。while 循 环 会 阻塞 消 
恩 队 列 ， 导 致 主线 程 不 能 发 送 消 息 到 Worker。 这 个 库 的 主要 目的 就 是 用 
超时 来 释放 主线 程 ， 同 时 通过 消息 根据 需要 改变 函数 运行 的 状态 。 








与 之 前 一 样 ，runner 要 用 回调 函数 返回 的 state 作 为 参数 再 次 调用 run 
函数 。 但 是 ， 由 于 它 不 是 一 个 Web Worker， 因 此 随后 要 调用 
window.setTimeout() 方 法 经 过 一 段 时 间 后 再 显示 下 一 个 迭代 ， 并 再 次 调 
用 该 函数 。 





例 8-8: 不 用 Web Worker 运 行 函 数 





var runner= 

{ 

stopFlag: false, 
//override this function 
onmessage: function (msg) 
{ 

if (msg.state) 

{ 

var state=msg.state; 
S('#status').html("time: "+state.time); 
} 

if (msg.set) 

{ 

this.state=msg.set; 

} 

return this.state; 

)» 

postMessage: function (message) 
{ 

this.onmessage (message) ; 
}> 

stop: function () 

{ 

this.stopFlag=true; 

} ， 


error: function(error) 















































{ 

this.stopFlag=true; 

} ， 

setup: function (run, state) 
{ 

this.run=run; 
this.state=state; 
this.execute(): 

) 

execute: function() 

{ 
Var that=this; 

setTimeout (function runIterator() 
{ 
that.state=that.run.apply(that, [that.state]); 
if (that.stopFlag) 

{ 
that.postMessage (that.state) ; 
} 

else 

{ 


that.execute(); 















































} 
}o 250); 


e 


ia 





模拟 的 Web Worker 与 代码 主体 之 间 的 通信 也 有 所 不 同 。 由 于 之 后 没 
有 回调 的 postMessage 方 法 ， 运 行者 必须 通过 提出 一 个 注册 回调 机 制 来 模 
拟 ， 该 回调 可 以 采用 与 Web Worker 的 onmessage 处 理 函 数 相 同 的 参数 。 


本 模型 提出 了 一 个 创建 在 web Worker 和 一 般 的 JavaScript 之 间 可 移 
植 代码 的 模型 ， 这 不 是 一 个 完整 的 解决 方案 。 它 缺少 一 些 功能 ， 如 加 载 
代码 。 还 缺少 调用 异步 方法 〈 如 一 个 Ajax 调用 ) 的 策略 和 完成 时 的 恢复 
处 理 。 这 很 有 必要 ， 通 常 Web Worker 被 设计 用 于 处 理 器 密集 型 的 工作 ， 
有 时 在 访问 一 个 Ajax 调用 或 IndexeDB 时 有 意义 。 


Web Worker FE 


在 主线 程 中 进行 JavaScript 编 程 时 ， 程 序 员 用 一 个 库 ， 如 jQuery 来 改 
善 的 API 和 隐藏 浏览 器 之 间 的 差异 。 对 于 使 用 Web Worker， 有 一 个 名 为 
jQuery Hive Chttp://github.com/rwldrn/jquery-hive) 的 jQuery 的 扩展 提供 
了 此 功能 。Hive 包 括 JavaScript 主 线程 中 的 PollenJS 库 ， 该 库 包 括 创建 
Worker 的 接口 。 


如 果 需 要 的 话 ，Hive 还 将 编码 和 解码 主线 程 和 Worker 之 间 的 消息 。 
在 某 些 浏览 器 中 (尤其 是 Firefox) ， 复 杂 的 数据 可 以 通过 postMessage 接 
口 发 送 。 然 而 ， 在 Chrome 和 Safari 的 一 些 版 本 中 ，postMessage 的 只 处 理 
字符 串 或 其 他 简单 的 数据 。 


Hive 还 在 Worker 中 包含 jQuery API 的 一 个 子 集 。 在 Hive API 中 最 重 
要 的 方法 是 $.get0 和 $.post0， 对 应 jQuery 中 的 啊 应 API。 例 如 ， 如 果 一 
Worker 需 要 通过 Ajax 访问 服务 占 ， 使 用 Hive 更 容易 实现 。 


Hive 还 包括 通过 $.storage 访 问 永 久 存 储 接 口 。 要 设置 一 个 值 ， 使 用 
$.storage (name, value) 。 如 果 设 置 为 不 用 第 二 个 value 参 数 ， 调 用 
$.storage (name) 将 返回 现 有 的 值 。 


Hive 中 还 包括 $.decode0 和 $.encode0， 可 用 于 对 JSON 消 上 息 进 行 编码 
或 解码 。 


第 9 童 Web Socket 





HTTP 是 一 个 请 求 和 啊 应 协议 。 其 设计 目的 是 请 求 文件 ， 并 围绕 请 
求 文 件 的 思想 进行 操作 。 这 对 于 必须 先 加 载 数 据 然 后 再 进行 保存 的 应 用 


类 型 非常 有 效 。 





然而 ， 对 于 需要 服务 占 实 时 数据 的 应 用 效果 相当 糟 料 。 许 多 应 用 类 
型 要 求实 时 或 半 实 时 访问 服务 器 。 例 如 聊天 或 那些 实时 共享 数据 的 应 
用 ， 如 许多 Google Office 应 用 ， 对 服务 喜来 说 确实 需要 一 个 方法 在 服务 
器 上 发 生 某 事 时 向 浏览 器 推送 数据 。HITP 中 有 几 种 实现 方式 ， 但 没有 
真正 有 效 的 方法 。 





一 些 应 用 ， 如 Gmail， 只 简单 地 建立 了 一 系列 大 型 的 HTTP 请 求 序 
列 ， 每 秒 一 次 以 上 《〈 见 图 9-1) 。 这 样 产生 大 量 的 开销 ， 而 且 也 不 是 一 
个 特别 有 效 的 服务 器 轮 询 方法 。 同 时 ， 还 会 产生 大 量 的 服务 器 负载 ， 因 
为 每 个 请 求 都 需要 在 服务 器 上 建立 和 销毁 ， 以 及 HTTP 头 和 用 户 身份 验 
证 的 网 络 开销 。HTTP 头 可 以 给 每 个 请 求 增加 几 百 KB 。 在 一 个 繁忙 的 服 
务 器 上 ， 这 会 给 服务 器 和 网 络 增加 相当 数量 的 负载 。 





图 9-1 Firebug iAGmail 


第 二 种 方法 是 打开 一 个 到 服务 占 的 HTTP 请 求 ， 并 把 它 挂 起 ， 当 服 
务 骨 需要 发 送 一 些 数据 时 ， 它 会 发 送 到 客户 端 ， 然 后 关闭 HITP 请 求 。 
此 时 浏览 器 会 打开 一 个 新 的 连接 并 重复 这 个 过 程 。 根 据 所 采用 的 特定 服 
务 吉 技 术 ， 当 持续 运行 一 个 大 型 的 线程 池 和 连接 时 ， 即 使 处 于 等 待 状态 
仍 会 在 服务 器 上 导致 显著 的 负载 ， 尽 管 在 使 用 非 阻 赛 服 务 器 《如 
Node.JS) 时 ， 这 几乎 不 成 问题 。 更 复杂 的 是 ， 因 为 该 浏览 需 可 能 只 多 
许 在 给 定时 间 癌 给 定 服务 器 发 送 有 限 数量 的 Ajax 请 求 ， 因 此 为 处 理 一 个 
或 两 个 请 求 打开 它 可 能 会 导致 别 的 工作 被 阻 蹇 ， 这 不 是 实现 的 最 佳 方 
oe 

















HTML 5 引入 了 Web Socket 的 思想 ， 与 TCP/IP 套 接 字 的 工作 方式 非 
常 类 似 。 浏 览 器 疝 目 标 服 务 器 打开 一 个 套 接 字 ， 并 保持 开放 直到 它 不 再 
需要 或 者 显 式 关闭 为 止 。 套 接 字 是 一 个 双向 实时 数据 通道 ， 而 一 个 
HTTP 请 求 是 一 个 简单 的 轮 询 系统 。 如 果 用 Ajax 通过 HTTP 发 送 每 个 键 点 
击 到 服务 器 ， 那 么 有 可 能 产生 至 少 300 一 400KB 的 开销 ， 用 cookie 处 理 每 
次 按键 可 能 需要 一 两 二 KB。 没有 用 于 和 套 接 字 的 HITP 头 ， 将 减少 很 多 开 
销 ， 开 销 将 减少 到 只 有 几 个 KB。 

















截止 到 本 文 编 写 时 (2011 年 8 月 ) ，WebSocket 已 经 在 Chrome8 及 其 
更 高 版 本 和 Safari5 版 本 中 得 到 支持 。Firefox 版 本 6 中 包含 了 对 Web Socket 
的 支持 ， 但 构造 器 为 MozWebSockets。Opera 已 经 实现 了 Web Socket 规 
范 ， 但 是 由 于 安全 问题 有 待 解决 ，Web Socket 默 认为 天 闭 状 态 ， 对 于 不 
文 持 Web Socket 的 浏览 器 可 以 使 用 传统 的 HTTP 或 者 Flash 进 行 回调 。 


有 一 些 类 库 ， 如 socket.io Chttp://socket.io) ， 将 为 Web Socket 提 供 
一 个 持续 的 接口 ， 并 向 可 能 不 支持 Web Socket 的 浏览 器 提供 回调 用 于 老 
式 HITP 通 信 。 也 可 以 在 文 持 Flash 但 不 文 持 Web Socket 的 浏览 器 中 用 
Flash 模 拟 Web Socket。 


Web Socket 规 范文 档 也 似乎 是 一 个 进展 中 的 工作 。 虽 然 Web Socket 


己 部 团 在 一 些 浏览 器 中 ， 但 是 关于 它们 如 何 实现 的 文档 还 很 少 。 已 经 出 
现 了 一 些 Web Socket 标 准 的 早期 版 本 ， 但 是 它们 还 互相 不 兼容 。 


Web Socket 接 口 


要 使 用 Web Socket， 首 先 需要 创建 一 个 WebSocket 对 象 ， 并 传递 一 
个 Web Socket URL 作 为 参数 。 不 同 于 HTTP 方 法 ，Web Socket URL 以 ws 
或 wss 开 头 ， 一 个 安全 的 Web Socket 将 使 用 SSL. 类 似 于 Ajax 下 的 
HTTPS: 





var socket-new WebSocket("ws: //example.com/socket") ; 


一 旦 套 接 字 的 连接 打开 ， 将 会 调用 套 接 字 的 socket.onopen(0 回 调 ， 
让 程序 知道 一 切 准 备 就 绕 。 当 套 接 字 关 闭 时 ，socket.onclose() 方 法 将 被 
调用 。 如 果 浏 览 器 希望 关闭 套 接 字 ， 应 该 调用 socket.close()。 





用 套 接 字 发 送 数 据 使 用 socket.send ("data") 方法 。 数 据 限定 为 字符 
串 ， 因 此 如 果 是 比 简 蛙 的 字符 串 更 复杂 的 数据 ， 需 要 将 该 数据 编码 为 
JSON、XMIL 或 其 他 数据 交换 格式 。 此 外 ， 套 接 字 仅 处 理 文本 ， 如 果 必 
须发 送 的 数据 是 二 进 制 数据 ， 应 该 通过 一 些 方法 将 其 编码 成 文本 。 


建立 Web Socket 连 接 





Web Socket 连 接 开始 很 像 一 个 HTTP 连 接 。 它 在 端口 80 CWS) 或 
443 (WSS) 上 打开 一 个 到 服务 器 的 连接 ， 然 而 ， 除 了 标准 的 HITP 头 ， 
它 还 包括 一 些 新 的 报头 ， 告 诉 服务 器 这 是 一 个 Web Socket 连 接 ， 而 不 是 
一 个 HTTP 连 接 。 它 还 包括 一 些 用 于 提供 安全 的 握手 字 节 。Web Socket 
协议 使 用 端口 80 和 443， 多 数 代 理 和 防火 墙 需 要 进行 正确 处 理 。Web 
Socket 也 可 以 用 与 HTTP 协 议 相 同 的 方法 来 指定 不 同 的 端口 ， 但 是 Web 
Socket 调 用 〔 如 一 个 Ajax)〉 必须 与 产生 它 的 web 服务 右 使 用 相同 的 端 
H. 





一 旦 连接 建立 ， 连 接 的 两 端 都 可 以 用 它 发 送 数据 。 可 以 发 送 任何 有 
效 的 UTF-8 格 式 的 字符 串 。 具 体 的 数据 格式 由 服务 器 端 和 客户 端 共同 决 
定 。 通 常情 况 下 ， 数 据 将 可 能 是 JSON 或 XML， 如 果 需 要 也 可 以 使 用 其 
他 格式 。 


Web Socket 示 例 


为 了 说 明 如 何 使 用 Web Socket， 给 出 了 例 9-1 中 的 简单 示例 。 这 里 用 
一 个 非常 简单 的 JavaScript 冰 数 向 一 个 提供 股票 价格 服务 的 服务 占 打 开 了 
一 个 套 接 字 。 它 发 送 一 个 感 兴趣 的 股票 代码 OBM) 。 然 后 ， 服 务 器 会 
找到 该 股票 的 价格 并 将 其 以 一 个 JSON 发 回 给 客户 端 。 服 务 器 可 以 设置 
为 每 5s 轮 询 一 次 新 价格 ， 并 在 价格 变化 时 发 送 回 客户 端 。 客 户 端 将 只 在 
每 次 价格 变动 时 刷新 元 系 。 


例 9-1: Socket 客 户 端 示例 








S (function () 

{ 

var socket-new WebSocket('ws: //localhost/stockprice'); 
//wait for socket to open 

SoCcket.onopen-function() 

{ 
socket.send(JSON.stringify ( 

{ 

ticker: "ibm" 

}) ) ; 

E 

socket.onmessage=function (msg) 

{ 

var prices=$.parseJSON (msg.data); 
var html="IBM: "+prices.ibm; 
S('div.prices').html (html); 

} 

)): 






































对 任何 用 过 Ajax 的 程序 员 来 说， 应 该 非常 熟悉 例 9-1 中 处 理 Web 


Socket 的 浏览 器 代码 。 用 相应 的 URL 创 建 一 个 Web Socket 对 象 。 一 旦 
Socket 被 打开 一定 要 等 它 打开 ) ， 数 据 可 以 通过 socket.send 事 件 发 送 
到 服务 器 。 当 服务 器 将 数据 发 送 回 浏览 器 时 ， 通 过 事件 对 象 的 数据 字段 
中 的 字符 串 调用 socket.onmessage 事 件 与 事件 对 象 的 数据 字段 的 字符 串 。 
在 这 种 情况 下 ， 数 据 是 JSON 的 ， 因 此 它 可 以 用 标准 浏览 器 的 JSON 解 析 
方法 进行 解析 ， 然 后 显示 在 浏览 器 中 。 





如 果 没 有 服务 器 使 用 它 ，Web Socket 客 户 端 就 没有 多 大 意义 。 通 党 
Web Socket 用 于 处 理事 件 驱 动 的 数据 ， 如 共 吝 文件 、 股 票 代 码 或 聊天 服 
务 。 昌 然 Web 服 务 器 开发 往往 选择 PHP 语 言 ， 但 是 对 于 本 例 ， 包 含 为 长 
期 运行 程序 和 事件 建立 的 编程 模型 的 语言 将 更 有 意义 。 











这 里 有 几 个 不 错 的 选择 。Node.js 的 效果 很 好 ， 而 且 具 有 
JavaScript (Web 程 序 员 已 经 熟悉 了 ) 的 优势 。 其 他 可 能 包括 : Erlang fil 
Yaws， 有 一 个 Web Socket 接 口 以 及 多 处 理 器 模式 ， 可 以 作为 此 类 编程 的 
思路 。 还 有 一 些 选 项 用 于 Java 和 JVM 的 其 他 语言 ， 包 括 Scala、Clojure 
等 。 也 可 以 用 Ruby 以 及 可 能 大 部 分 的 .NET/CLR 语 言 实 现 。 说 实话 ， 大 
部 分 用 于 Web 服 务 器 编程 的 语言 能 够 使 用 Web Socket。 


在 本 例 服务 器 端 代码 中 (用 Node.js 实 现 ) ， 服 务 器 是 用 websocket- 
server 包 建立 的 ， 可 以 通过 NPM 或 者 在 github 上 找到 。 服 务 器 在 8080 端 口 
上 等 竺 连接 ， 当 收 到 一 个 连接 时 调用 回调 。 该 连接 回调 通过 连接 对 象 等 
待 消息 到 达 。 在 本 例 中 ， 随 后 调用 一 个 高 阶 函 数 tickerUpdate， 该 函数 碍 


询 股 票 价格 并 在 对 应 股票 价格 改变 时 调用 回调 ， 发 送 新 的 价格 给 客户 。 
Node 编 程 更 全 面 的 指导 查阅 Tom Hughes-Croucher 的 著作 《Node: 构建 
与 运行 》 (Node: Up and Running) 。 


例 9-2: Socket 服 务 器 示例 








var ws-require("websocket-server"); 

var server-ws.createServer(); 
server.addListener("connection", function (connection) 
{ 

connection.addListener("message", function (msg) 
{ 

var tickerSymbol=msg.ticker; 

tickerUpdate (tickerSymbol, function (price) 

{ 

var msg= 

{ 

}; 

msg[tickerSymbol]=price; 
server.send(connection.id, JSON.stringify(msg) ); 























server.listen(8080); 


一 


Web Socket 协 议 








HAIR, Web Socket 的 底层 细 市 与 程序 员 无 天， 但 是 浏览 占 
中 和 服务 器 上 的 接口 将 负责 该 细节 ， 并 提供 一 个 可 以 发 送 数据 的 API。 


话 虽 这 人 么 说 ， 但 是 有 时 知道 关于 事情 如 何 运作 的 底层 细节 ， 对 于 了 
解 为 什么 某 些 东 西 不 能 正常 工作 或 者 在 其 他 环境 下 实现 Web Socket% 
端 可 能 是 有 用 的 。 特 别 需 要 了 解 套 接 字 是 如 何 建 并 的 。 





Web Socket 在 浏览 器 和 服务 器 之 间 使 用 TCP 套 接 字 而 不 是 一 个 HTTP 
封套 进行 数据 传送 。 但 重要 的 是 要 了 解 如 何 建立 一 个 套 接 字 。 当 浏览 器 
试图 打开 一 个 套 接 字 时 ， 它 发 送 一 个 看 起 来 像 HTTP GET 请 求 ， 但 有 一 
些 额外 的 头 的 东西 ， 如 例 9-3 所 示 。 

















连接 建立 后 ， 然 后 来 回 发 送 数据 帧 。 每 帧 以 一 个 空 字 节 0x00 开 始 ， 
以 一 个 0xFF 字 。 封 套 内 部 是 UTF-8 格 式 的 数据 。 


例 9-3: Socket% 





GET/socket HTTP/1.1 
Upgrade: WebSocket 
Connection: Upgrade 

Oragin: http://www.test.com 
Host: www.test.com 
Content-Length: 0 











有 一 些 Web Socket 的 服务 器 端 实现 ， 可 以 在 Python、Ruby、 
Frlang、Node.js、Java 以 及 其 他 语言 中 工作 。Web Socket 的 类 库 正 在 不 
断 发 展 ， 有 各 种 状态 的 开发 包 可 用 于 Web 开 发 用 到 的 几乎 所 有 主要 语言 
中 。 一 般 情 况 下 ，Web Socket 的 服务 器 端 将 取决 于 项 目的 其 他 需要 。 
此 ， 对 于 为 给 定 项 目 使 用 的 环境 寻找 Web Socket 包 很 有 意义 。 





Ruby Event Machine 


Ruby Event Machine 也 为 使 用 Web Worker 提 供 了 一 个 理想 的 平台 ， 
因为 它 向 程序 员 提 供 了 一 个 基于 事件 的 接口 ， 通 过 这 个 接口 可 以 向 客户 
端 发 送 数据 流 。Event Machine: Web Socket 接 口 与 Java Script 接口 配合 
得 很 好 。 在 客户 端 ，EventMachine 接 口 有 用 于 onopen、onmessage 和 和 
onclose 的 标准 事件 处 理 程序 ， 也 可 以 通过 ws.send0 函 数 把 数据 传 回 客户 
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例 9-4 显 示 了 一 个 非常 普通 的 Ruby Web Socket 接 口 的 "hello world" 示 
例 。 


例 9-4: Ruby EventMachine Web Socket 处 理 程序 





require'em-websocket' 

EventMachine: WebSocket.start(: host=>"0.0.0.0", : port=> 

8080) do|ws | 
ws.onopen{ws.send"Hello Client! "} 
ws.onmessage{|msg|ws.send"Pong: #{msg}"} 
ws.onclose{puts"WebSocket closed" } 








end 


Erlang Yaws 


Erlang 是 数 十 年 前 开发 的 非常 纯正 的 函数 式 语言 ， 当 时 主要 用 于 电 
话 的 程控 开关 ， 后 来 发 现在 很 多 其 他 需要 大 量 并 行 或 者 强健 壮 性 的 领域 
也 很 适用 。 它 同时 具有 并 行 性 、 容 错 性 和 强 拓展 性 。 近 年 来 它 又 用 于 网 
络 世界 ， 因 为 它 所 有 对 于 电话 程控 开关 方面 的 优化 在 网 络 服务 器 方面 也 
非常 有 用 。 











Erlang Yaws 网 络 服务 器 当然 也 文 持 Web Socket。 相 关 文 档 和 简单 的 
代码 示例 可 以 在 Yaws 的 Web Sockets 页 面 


(http://yaws.hyber.org/websockets.yaws) 找到 ， 如 例 9-5 所 示 。 


例 9-5: Erlang Yaws Web Socket 处 理 程序 





























out (A) -> 

case get upgrade header (A#arg.headers) of 

undefined-> 

{content, "text/plain", "You're not a web sockets client!Go 
away! "}; 

"WebSocket"-> 

WebSocketOwner-spawn(fun()--websocket owner ()end) ， 

{websocket,WebSocketOwner, passive} 

end. 

websocket owner ()-> 

receive 

{ok,WebSocket}-> 

SsThis is how we read messages(plural!) from websockets on passive 
mode 





case yaws api: websocket receive (WebSocket)of 
{error,closed}-> 
io: format ("The websocket got disconnected right from the start." 














"This wasn't supposed to happen!-n"); 
{ok,Messages}-> 

case Messages of 
[<<"client-connected">>]-> 

yaws api: websocket setopts (WebSocket, [{active,true}]), 

echo server (WebSocket) ; 

Other-> 

io: format ("websocket owner got: ~p.Terminating~n", [Other] ) 
end 

end; 

_ 一 一 OK 

end. 

echo server (WebSocket) -> 

receive 

{tcp,WebSocket, DataFrame}-> 

Data-yaws api: websocket unframe data (DataFrame) ; 

io: format ("Got data from Websocket: ~p~n", [Datal), 

yaws api: websocket send(WebSocket, Data), 

echo server (WebSocket) ; 

(tcp closed,WebSocket]-- 







































































io: format("Websocket closed.Terminating echo server...~n"); 
Any-- 

io: format ("echo server received msg: ~p~n", [Any]), 
echo server (WebSocket) 

end. 

get upgrade header (#headers{other=L})-> 

lists: foldl(fun({http header, , K0, , Vj, undefined)-> 
K-case is atom(K0)of 

true-> 

atom to list (KO); 

false-> 

KO 

end, 





case string: to lower (K)of 
"upgrade"--- 





V; 

r 
undefined 
end; 

( s Acc)-> 
Acc 





end,undefined,L). 





如 果 你 不 懂 Erlang 的 语法 的 话 ， 这 段 代 码 会 很 难 懂 。 代 码 的 关键 点 


在 于 ， 客 户 端 可 以 发 送 任意 组 合 的 请 求 〈 比 如 TCP 连 接 、Web Socket 
接 或 者 是 带 数 据 的 请 求 ) 并 且 服 务 器 端 能 按照 发 送 请 求 的 不 同 把 每 条 消 
息 都 正确 处 理 。 


第 10 章 ”新 标记 


除了 大 量 处 理 数据 的 新 接口 外 ，HTML 5 还 引入 了 一 些 新 的 标记 ， 
可 以 用 于 在 一 个 Web 页面 中 提高 应 用 开发 人 员 开发 优质 应 用 的 能 





应 用 标记 





任何 应 用 程序 中 都 有 的 一 个 共同 任务 : 向 用 户 反 馈 一 个 长 时 间 运 行 
任务 的 运行 进度 。 让 用 户 知 道 任务 正在 进行 ， 没 有 冻结 。 可 以 使 用 一 些 
<div> WAM BLXE XLIFICSS Ss — EE EN, THHTML 5 通过 一 个 新 
<<progress 之 标记 规范 了 程序 和 外 观 。 和 截至 本 书 编写 时 ， 该 标记 已 经 在 
Firefox 和 Chrome 中 得 到 支持 。 它 提供 了 两 个 属性 使 其 易于 癌 用 户 显 示 进 


FE: value 显 示 进 度 条 的 当前 值 ，max 显 示 进 度 条 的 最 大 值 。 











为 了 同 旧版 浏览 器 的 用 户 显 示 一 个 进度 指示 ， 建 议 在 进度 条 内 的 < 
span 过 元素 里 包含 一 些 形式 的 文字 。 例 10-1 显 示 了 一 个 完成 进度 为 20% 
的 进度 条 的 代码 。 例 6-4 显 示 了 JavaScript 如 何 将 属性 作为 事件 进行 更 
新 ， 从 而 在 程序 中 指示 进度 。 进 度 条 也 可 以 像 任 何其 他 HTML 元 素 一 样 
用 CSS 设 置 样式 。 


例 10-1: meter 指 示 器 





<!DOCTYPE html> 

<html> 

<head> 
<title>Progress</title> 
</head> 

<body> 

<progress value="20"max="100"> 
<span>running</span> 
</progress> 

</body> 

</html> 











<progress 之 元 素 可 以 用 于 显示 一 个 正在 运行 的 事件 ， 雪 meter 之 元 
素 可 以 用 于 显示 一 个 静态 值 ， 如 一 个 人 磁盘 有 多 少 可 用 空间 或 者 一 个 筹 球 
目标 增加 了 多 少 钱 。 


过 meter 之 标记 可 以 市 一 些 参数 ， 包 括 min、max、low、high、 
optimum 和 value。 所 有 这 些 都 应 设置 为 数字 值 。min 和 max 值 显示 值 范围 
的 两 端 ， 而 value 属 性 显示 当前 值 。High、low 和 optimum 人 参数 允许 标记 
将 范围 分 成 子 段 。 通 过 CSS， 可 以 用 不 同 的 样式 值 将 范围 的 不 同 部 分 设 
置 成 不 同 外 观 。 例 如 10-2 演 示 了 二 meter 二 标记 的 用 法 。 








像 二 progress 二 标记 一 样 ， 二 meter 二 标记 内 应 封装 一 个 二 span 二 元 
素 ， 用 于 在 不 文 持 此 标记 的 浏览 器 中 显示 该 数据 。 目 前 ，Chrome 与 
Opera 都 文 持 这 个 标记 。 其 他 浏览 右 可 能 会 逐渐 跟 上 来 。 


例 10-2: meter 指 示 器 





<!DOCTYPE html> 
<html> 

<head> 
<title>Meter</title> 
</head> 

<body> 

<meter min="0"value="20"max="100" > 
<span>20%</span> 
</meter> 

</body> 

</html> 
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通过 WAI-ARIA 无 障碍 访问 


使 用 Web 应 用 《或 任何 其 他 的 GUI 应 用 程序 ) 对 于 那些 身体 有 残疾 
的 人 来 说 可 能 有 很 大 的 障碍 。 因 此 ，HTML 5 定义 了 无 障碍 富 互 联网 应 
Hi CARIA) 。 尤 其 针对 视觉 障碍 (其 中 可 能 包括 出 于 某 种 原因 ， 仍 在 
使 用 非 图 形 浏览 器 的 用 户 〉。 通 过 在 应 用 的 标记 中 添加 属性 ， 可 以 帮助 
这 些 用 户 访问 标记 中 的 内 容 。 


这 部 分 不 是 一 个 对 无 障碍 访问 应 用 的 完整 指南 ， 介 绍 无 障碍 访问 应 
用 需要 整 本 书 。WAI-ARIA 的 基本 思想 是 为 页 面 上 的 元 素 增 加 可 以 通过 
屏幕 阅读 器 读 取 的 语义 ， 使 有 视觉 障碍 的 用 户 了 解 页 面 上 发 生 了 什么 。 
二 img 之 标记 的 alt 属 性 和 二 hr 二 标记 的 title 属 性 对 这 种 文本 的 支持 已 经 有 
— Bry ta] 了。 











WAI-ARIA 的 最 常见 的 属性 是 role 属 性 。 它 为 元 素 提供 了 上 下 文 环 
在 HIML 中 ， 如 <span> 和 <<1i> 之 类 的 元 素 用 于 做 许多 不 同 的 事 
， 从 导航 到 实际 列表 。 通 过 增加 role 属 性 ， 可 以 帮助 屏幕 阅读 器 识别 
所 有 这 些 内 容 。 例 10-3 演 示 了 WAI-ARIA 的 用 法 。 


例 10-3: WAI-ARIA 


<!DOCTYPE html> 
<html> 
<head> 





<title>Meter</title> 

</head> 

<body> 

<ul id="treel" 

role="tree" 

tabindex="0" 

aria-labelledby-"label 1"> 

<li role="treeitem"tabindex="-1"aria-expanded="true">Fruits</li 











<li role="group"> 











<li role="treeitem"tabindex="-1">Oranges</1li> 
<li role="treeitem"tabindex="-1">Pineapples</li> 


























</ul> 
</li> 
</ul> 


</body> 
</html> 


人 





microdata 


有 时 给 一 组 HTML 标记 增加 机 器 可 读 的 数据 是 非常 有 用 的 。 例 如 ， 
可 以 在 一 个 模板 中 用 这 个 过 程 将 数据 编码 成 一 个 页 面 ， 之 后 可 以 通过 
JavaScript 读 取 。 为 了 以 标准 化 的 方式 实现 这 种 过 程 ，HIML 5 创建 了 
microdata 的 概念 ， 它 可 以 添加 到 HTML 5 的 标记 中 。 








传统 的 HIML 标 记 提 供应 如 何在 屏幕 上 格式 化 显示 的 信息 ， 而 不 是 
言 轧 本 喘 。 一 个 程序 可 以 看 到 一 个 和 1 > 标记 ， 并 知道 它 是 一 个 列表 中 
的 项 目 ， 但 不 会 知道 是 什么 样 的 列表 。 它 是 一 个 出 售 书籍 或 者 出 席 茶 个 
事件 的 列表 吗 ? 通过 添加 microdata 可 以 提供 该 数据 的 相关 信息 ， 供 以 后 
编程 使 用 。 











在 一 般 情况 下 ， 与 应 用 程序 相 比 microdata 标 记 可 能 更 多 地 用 于 网 页 
中 ， 但 是 可 以 调用 它 作 为 插件 在 一 个 页 面 中 运行 或 者 以 其 他 方式 管理 一 
个 页 面 的 应 用 程序 来 使 用 。 可 以 想象 ， 一 个 HIML 5 应 用 作为 公司 网 站 
管理 面板 运行 ， 给 销售 经 理 提 供 了 空间 ， 可 以 加 入 microdata 标 记 为 出 售 
项 目 添加 相关 信息 ，Google 搜 索引 擎 或 者 JavaScript 程 序 可 以 用 它 形成 外 
部 供应 两 ， 该 信息 可 能 会 被 加 入 到 一 个 网 页 中 。 





事实 上 ，microdata 韭 常 简单 : 只 是 一 些 附 加 到 HTML 标 记 中 的 具有 
规范 名 称 的 额外 属性 ， 以 及 一 些 使 用 该 数据 属性 的 接口 。 


要 指定 页 面 中 使 用 microdata 的 部 分 ， 需 要 给 封闭 元 兹 添加 一 个 
itemscope。microdata 的 词汇 库 定 义 通 过 将 itemtype 属 性 设置 为 一 个 定义 
该 词汇 库 的 URL 来 实现 。 其 中 ，itemprop 属 性 指定 封闭 HTML 标记 的 特 
定 属性 。 


在 http://www.data-vocabulary.org 可 以 找到 一 些 预定 义 的 词汇 库 。 包 
括 用 于 Events、Organizations、People、Products、Reviews、Review- 
Aggregates、Breadcrumbs、Offers 和 Offer-Aggregates 的 规范 。Google 能 
理解 这 些 语义 ， 从 而 提高 搜索 结果 。 





在 理论 上 应 该 在 DOM 中 有 接口 解析 microdata， 但 截至 目前 还 没有 
准备 好 ， 而 且 它 的 实现 也 可 能 参差 不 齐 。 值 得 庆幸 的 是 ，microdata 只 是 
HTML 属 性 ， 因 此 它 可 以 用 CSS 选 择 器 通过 DOM 接 口 或 jQuery 很 容易 地 
进行 解析 和 处 理 。 


新 的 表单 类 型 


HTML 5 用 一 大 堆 新 的 表单 类 型 对 自 20 世 纪 90 年 代 初 以 来 HIML 中 
表单 的 经 典 形式 进行 了 增强 。 其 中 大 部 分 是 关于 从 开始 一 直 在 使 用 的 经 
J — input type="text" 过 标记 的 变化 。 这 些 新 的 表单 类 型 对 一 个 表单 所 能 
接收 的 输入 类 型 和 其 所 提供 的 接口 提供 了 急需 的 灵活 性 。 


许多 情况 下 ， 在 移动 设备 上 改变 输入 类 型 也 将 导致 设备 生成 一 个 目 
定义 键盘 ， 使 用 户 能 够 输入 正确 的 数据 类 型 。 例 如 ， Soe 
number， 该 设备 可 以 生成 一 个 数字 键盘 。 对 于 tel] 类 型 ， 设 备 会 生成 一 个 
看 起 来 有 点 不 同 的 数字 键盘 ， 不 过 为 输入 电话 号码 进行 了 优化 。 对 于 
email 类 型 键盘 将 是 一 个 为 了 输入 电子 邮件 地 址 进行 了 修改 的 标准 
QWERTY RER o 


对 智能 手机 应 用 特别 有 用 的 一 种 输入 类 型 是 语音 输入 类 型 : 将 
itemtype 属 x-webkit-speech/ > 。speech 标 记 将 接收 用 户 所 说 的 话 并 把 它 翻 
译 成 文字 。 例 如 ， 我 的 Android 手 机 ， 有 一 个 Google 搜 索 小 工具 ， 可 以 

通过 语音 搜索 。speech 标 记 也 人 允许 用 户 正常 地 键入 文本 。 当 用 户 说 话 
时 ，input 将 触发 的 webkitspeechchange 的 事件 ， 它 可 以 用 来 与 用 户 交 
EE 


警告 : 对 于 非 英语 母语 或 者 其 他 非 标准 口音 英语 的 用 户 ， 使 用 这 个 


标记 可 能 会 非常 困难 。 许 多 我 的 以 色 列 和 俄罗斯 的 同事 发 现 ， 这 些 输 入 
不 是 非常 有 用 。 它 也 可 能 对 英语 以 外 的 其 他 语言 提供 有 限 的 支持 。 因 
此 ， 如 果 应 用 的 用 户 讲 波兰 语 或 希 伯 来 语 ， 标 记 可 能 不 一 定 有 用 。 


HTML 5 增加 了 请 求 一 个 表单 元 素 的 能 力 。 如 果 required 的 属性 是 set 
并 且 该 元 素 是 空白 的 ， 那 么 在 CSS 样 式 中 它 可 能 被 设置 为 : invalid 


selector。 


要 显示 一 个 滑 块 用 于 让 用 户 从 一 个 值 的 范围 中 进行 选择 ， 可 以 使 用 
range 类 型 。 指 定 其 最 小 值 、 最 大 值 以 及 起 始 值 。 





其 他 输入 类 型 相当 简单 ， 多 数 让 程序 员 指 定 预 期 什么 样 的 数据 ， 并 
且 如 果 一 个 字段 不 正确 则 让 浏览 器 将 其 标记 为 无 效 。 表 10-1 显 示 了 一 些 
可 用 的 选项 。 


表 10-1: 表单 输入 

类 型 Hi 说 明 

email Email Bh ht 

date 日 期 min 和 max 可 以 指定 一 个 范围 

time 日 期 时 间 min 和 max 可 以 指定 一 个 范围 

tel 电话 号 码 通过 正则 表达 式 指定 格式 的 模式 
color 颜色 格式 如 #BBBBBB 

number 数字 - TE Ie) Egg] T Si 3A 


search 搜索 min 和 max 可 以 指定 一 个 范围 


audio 和 video 


HTML 5 还 通过 <audio 之 和 雪 video 之 标记 对 音频 和 视频 提供 了 新 的 
文 持 。 对 于 在 HIML<img> 之 标记 中 通过 src 属 性 使 用 过 音频 文件 或 视频 
文件 的 人 应 该 对 这 些 标 记 非 常熟 悉 。 它 们 都 可 以 通过 controls 属 性 进行 
设置 以 显示 控制 。 音 频 和 视频 也 可 以 用 JavaScript 进 行 控制 ， 用 CSS 设 置 
样式 。 





对 于 如 何 编写 HTML 5 媒体 脚本 的 完整 描述 超出 了 本 书 的 范围 ， 不 
过 可 以 在 ShellyPowers 的 书 《HTML 5 Media) (HTML 5 媒体 ) 中 找到 
相关 内 容 。 


Canvas 和 SVG 


除了 提供 声音 和 视频 支持 外 ，HTML 5 还 对 于 在 浏览 器 中 用 Canvas 
和 和 SVG 构建 图 像 提 供 了 支持 。 传 统 的 HTML 可 以 显示 图 片 但 是 Canvas 和 和 
SVG 可 以 做 更 多 的 事情 。 





SVG 是 一 种 可 伸缩 矢量 图 形 的 XML 标准 ， 这 就 是 说 SVG 中 创建 的 
图 像 可 以 缩放 、 旋 转 和 操纵 。 此 外 ， 在 SVG 图 像 中 的 每 个 元 素 都 是 一 个 
DOM 元 素 。 因 此 ， 可 以 说 在 SVG 创建 一 个 附加 标准 JavaScript 事 件 处 理 
程序 的 圆圈 。SVG 中 的 元 素 也 可 以 作为 DOM 的 部 分 进行 操纵 ， 元 素 可 
以 直接 用 DOM 或 jQuery 进行 添加 、 删 除 或 更 改 。SVG 元 素 也 可 以 像 其 他 
任何 HIML 元 素 一 样 用 CSS 设 置 样式 。 有 的 书 深 入 探讨 了 SVG， 如 Kurt 
Cagle 的 《HTML 5 Graphics with SVG& CSS3) “用 SVG 和 CSS3 绘 制 





HTML 5 图 形 ) 。 


Canvas 由 苹果 公司 最 初创 建 用 于 OS X 中 ， 后 来 引入 到 Safari 中 ， 已 
经 从 Safari 引 入 到 大 多 数 其 他 浏览 器 中 。Canvas 提 供 了 一 个 2D 绘 图 表 
面 ， 可 以 在 上 面 用 代码 泻 染 图 像 。 在 本 书 第 8 章 的 “Web Worker 碎 形 示 
例 ” 中 用 它 来 绘制 Mandelbrot 集 ， 其 实 它 的 力量 很 强 。 在 Steve Fulton 和 
Jeff Fulton 的 《HTML 5 Canvas》 中 有 完整 的 介绍 。 


除了 二 维 Canvas 外 ， 基 于 WebGL 的 三 维 Canvas 己 经 开始 在 一 些 浏览 


器 中 实现 了 。 相 关 示 例 和 教程 见 HTML 5 Rocks 的 教程 ， 网 址 : 


http:/www.HTML Srocks.com/en/tutorials/three/intro/。 


地 理 位 置 








顾名思义 万 维 网 是 履 盖 全 世界 的 ， 但 是 它 也 有 很 多 事情 是 本 地 的 。 
如 果 我 正在 寻找 一 个 比萨 饼 店 ， 我 可 能 希望 找 一 个 在 我 所 在 位 置 附近 
的 。 地 理 位 置 让 浏览 器 通过 几 种 机 制 确定 用 户 的 位 置 。 如 果 GPS 可 用 
(因为 许多 智能 手机 上 都 有 〉， 将 使 用 它 获 得 可 能 精确 到 几米 的 位 置 。 
如 果 没 有 GPS 的 接 入 ， 那 么 浏览 器 就 可 以 尝试 使 用 蜂 窒 基 站 或 WiFi 集 线 
器 的 信息 ， 这 些 方法 可 能 不 够 精确 ， 但 往往 也 够 用 。 如 果 我 们 的 目标 是 
找到 当地 的 比萨 饼 店 ， 知 道 到 几 个 街区 的 位 置 可 能 就 足够 了 。 在 大 多 数 
情况 下 ，Geolocation API 要 求 用 户 批准 该 请 求 。 


要 得 到 用 户 的 位 置 ， 用 两 个 回调 作为 参数 调用 getCurrentPosition() 
方法 ， 一 个 回调 用 于 返回 成 功 的 位 置 ， 男 一 个 用 于 返回 错误 。 在 浏览 絮 
能 够 找到 用 户 位 置 的 情况 下 ， 将 返回 该 位 置 的 经 度 和 纬度 ， 如 果 能 弄 清 
楚 海 拔高 度 的 话 ， 海 拔高 度 也 是 一 个 精确 的 参数 。 如 果 出 现 错误 ， 将 调 
用 相应 的 错误 情况 。 











navigator.geolocation.getCurrentPosition(userLocationCallback,erro 











新 的 CSS 


除了 新 的 JavaScript 接 口 和 新 的 HTML 标记 外 ，HTML 5 还 增加 了 一 
堆 新 的 CSS 选 择 器 ， 其 中 包括 : nth-child0 和 : first-child， 以 及 CSS 
的 “ 非 > 运 算 符 : not()， 其 用 法 如 : not Cbox) 。 这 些 让 开发 者 能 更 多 地 
控制 应 用 的 界面 。 


除了 新 选择 器 外 ，HTML 5 包含 对 CSS 中 的 Web 字 体 的 支持 。 现 
在 ， 可 以 在 CSS 中 定义 一 种 新 的 字体 并 在 CSS 中 包含 一 个 True Type 字体 
文件 用 于 产生 特别 的 样式 。 


HTML 5 的 CSS 还 包括 其 他 一 些 非 常 酷 的 功能 ， 可 以 在 文字 的 
Overflow 中 作 更 多 的 设置 ， 通 过 设置 文字 的 Strokes 设 置 一 个 DOM 对 象 中 
透明 度 ， 通 过 HSL 指 定 颜色 以 及 更 多 的 功能 。 当 然 ， 像 HTML 5 中 的 其 
他 所 有 功能 一 样 ， 不 是 所 有 的 浏览 器 中 都 支持 这 些 功 能 。 


附录 A 需要 了 解 的 JavaScript 工 具 


在 许多 方面 ，JavaScript 都 是 一 种 年 轻 的 语言 。 虽 然 ， 它 已 经 产生 大 
约 15 年 左右 了 ， 但 是 最 近 才 被 用 于 大 型 项 目 。 因 此 一 些 帮 助 程序 员 编 写 
强大 、 可 调试 的 程序 的 工具 仍 在 开发 中 。 下 面 介绍 几 个 强烈 推荐 使 用 的 
TA. 


JSLint 


#é Douglas Crockford 的 JavaScript 语 法 检查 器 。JSLint 可 以 测试 
JavaScript 代 码 所 有 可 能 出 现 的 问题 方式 。 可 以 从 网 站 
(http://jslint.com) 或 本 地 运行 JSLint。 在 雅虎 的 控件 集中 有 一 个 拖 电 控 
件 ， 可 以 从 命令 行使 用 Rhino《〈 稍 后 讨论 ) 运行 它 。 一 个 简单 的 Bash 脚 
本 可 以 使 它 易 于 运行 〈 见 例 A-1) 。 甚 至 可 以 把 JSLint 挂 接 到 你 的 编辑 器 
中 。 





如 果 你 要 使 用 一 个 JavaScript 工 具 ， 那 应 该 是 这 一 个 。 要 理解 为 什 
么 ， 参 见 Crockford 的 《JavaScript: 语言 精粹 》 (JavaScript: The Good 
Parts,O' Reilly 。 这 本 书 详细 描述 了 ， 为 什么 要 选择 JSLint。 它 能 
捕获 很 多 非常 常见 的 JavaScript 错 误 ， 并 且 应 该 被 认为 是 每 一 个 
JavaScript 程 序 员 的 工具 链 中 的 一 个 重要 组 成 部 分 。 


要 对 每 个 文件 配置 JSLint， 可 以 在 该 文件 的 顶部 添加 注释 。 这 些 注 








释 可 以 在 文件 中 开局 或 关闭 选项 ， 并 告诉 JSLint 在 其 他 地 方 定义 的 全 局 
变 


: 


例 A-1: JSLint shell wrapper 





$!/bin/bash 
java-jar~/bin/rhino/js.jar~/bin/jslint.js$1 








JSMin 


对 JavaScript 程 序 员 来 说 ， 事 实 是 程序 会 以 源 代码 的 形式 下 载 到 Web 
浏览 器 。 可 以 通过 缩小 文件 大 小 来 提高 速度 。JSMin 在 文件 上 执行 一 些 
操作 ， 例 如 删除 注释 和 空白 。 通 常 ， 运 行 JSMin 后 文件 大 约 是 其 原始 大 
小 的 30%。 这 意味 着 要 传输 到 客户 端 更 少 的 字 节 。 








警告 : JSMin 是 一 个 单 向 的 过 程 ， 因 此 一 定 要 确保 手头 有 一 份 文件 
的 副本 。 也 不 应 该 用 于 开发 中 ， 因 为 它 会 使 调试 非常 困难 。 并 且 确 保 运 


行 JSLint 之 后 再 运行 JSMin。 


JSBeautifier 





如 果 你 的 JavaScript 代 码 常 常 变 得 混乱 ， 
JSBeautifier (http:Wjsbeautifier.org) 是 一 个 很 好 的 工具 。 它 会 根据 一 些 
基本 的 规则 重新 格式 化 一 个 JavaScript 文 件 。 可 以 从 网 站 或 从 更 面 命令 行 
使 用 Rhino 运 行 它 。 本 书 中 的 所 有 JavaScript 代 码 已 使 用 此 工具 进行 了 格 








式 化 。 


JSBeautifier H] 以 采用 一 些 命令 行 选项 来 指定 缩 进 样式 和 括号 样式 。 
可 以 通过 制 表 符 或 空格 缩 进 。-i 选 项 控制 缩 进 的 级 别 。 


JSBeanutifier 也 可 以 格式 化 JSON 字 符 串 。 因 为 它 是 用 JavaScript 编 写 
的 ， 所 以 可 以 把 它 租 入 到 其 他 的 JavaScript 程 序 中 。 在 某 些 时 候 ， 如 果 需 
要 向 用 户 显 示 一 个 JSON 结 构 ， 可 以 使 用 这 个 类 库 漂 亮 地 输出 它 《〈 见 例 
A-1) 。 


例 A-2: JavaScript Pretty Printer 





#!/bin/bash 

cp$1$1.bak 

export WORKING DIR=pwd 

cd~/bin/js-buautify 

java-jar--/bin/rhino/js.jar beautify-cl.js-d--/bin/js-buautify/N 
-i 1-b-p-n$WORKING DIR/$1>/tmp/$1 

mv/tmp/S1SWORK NG_D R/$] 


















































Emacs JS2 模 式 


Emacs JS2 (http://code.google.com/p/js2-mode/) 模式 是 一 个 非常 好 
的 编辑 JavaScript 的 框架 。 对 于 那些 已 经 熟悉 Emacs 的 人 来 说 ， 这 是 非常 
有 益 的 。 





Aptana 


对 于 那些 希望 在 一 个 完整 的 IDE 中 开发 JavaScript 的 人 ，Aptana 是 一 
个 不 错 的 选择 。Aptana (http://www.aptana.com) 是 一 个 为 JavaScript 定 
制 的 Eclipse 版 本 。 有 很 多 可 以 自 定 义 的 选项 。 


警告 : Aptana 将 重新 格式 化 代码 ， 但 它 有 时 会 以 很 奇怪 的 方式 完成 


一 一 很 不 错 的 方式 ， 只 是 有 点 不 同 。 
YSlow 


在 一 个 大 型 的 web 应 用 中 ， 加 载 缓慢 是 不 正常 的 。 如 果 发 生 这 种 情 
况 ， 可 以 和 Firebug 一 起 使 用 这 个 工具 ， 找 出 瓶颈 在 哪里 。 该 工具 配 有 一 
本 由 YSlow Chttp://developer.yahoo.com/yslow/) 创建 者 撰写 的 书 《 高 性 
能 网 站 》 (High Performance Web Sites) 。 它 涵盖 了 远 远 比 JavaScript 更 
多 的 内 容 ， 它 会 在 当 每 个 文件 作为 网 页 的 一 部 分 传送 时 予以 显示 。 


FireRainbow 


FireRainbow (http://firerainbow.binaryage.com/)〉 是 一 个 Firebug 插 
件 ， 在 Firebug 脚 本 标记 中 设置 JavaScript 色 彩 。 这 是 一 个 非常 好 的 方 
式 ， 使 调试 器 中 的 代码 更 易于 陪读。 


Speed Tracer 


Speed Tracer Chttp://code.google.com/webtoolkit/speedtracer/) 是 一 个 


GoogleChrome 插 件 ， 让 你 知道 浏览 器 上 正在 和 干什么。 在 花费 好 几 天 时 间 








优化 JavaScript 之 前 ， 知 道 它 是 否 真正 有 益 。 如 果 CSS 是 真正 的 瓶颈 ， 它 


会 告诉 你 ! 
CoffeeScript 


CoffeeScript Chttp://jashkenas.github.com/coffee.script/) 是 一 种 很 酷 
的 新 语言 ， 它 使 用 JavaScript 作 为 编译 目标 。 如 果 你 喜欢 函数 式 编程 ， 应 
该 会 对 它 感 兴趣 。 它 已 经 有 一 些 忠 实 的 追随 者 。 有 几 本 CoffeeScript 书 籍 
正在 撰写 或 已 经 完成 。CoffeeScript 声 称 其 产生 的 代码 能 够 通过 JSLint 的 
验证 。 





ClojureScript 


如 果 你 喜欢 Lisp， 试 一 下 
ClojureScript Chttp://github.com/clojure/clojurescript) ， 它 是 一 种 编译 
器 ， 能 将 Lisp 的 Clojure 直 接 编译 成 JavaScript。 它 是 由 Clojure 的 创造 者 
Rich Hickey 创 建 的 。 


Rhino 


Rhino Chttp://www.mozilla.org/rhino/) 是 一 种 基于 Java 的 JavaScript 
实现 。 如 果 你 想 创建 在 JavaScript 中 的 命令 行 上 运行 的 工具 ，Rhino 可 以 
完成 该 任务 。 一 些 JavaScript 程 序 ， 如 JSLint， 在 Rhino 下 运行 的 与 在 浏 
览 器 中 一 样 好 。 此 外 ，Rhino 可 以 用 于 在 JavaScript 中 编写 Java 对 象 ， 这 





Node.js 


Node.js (http://nodejs.org) 是 正在 开发 的 一 个 新 的 服务 堪 端 平台 。 
它 使 用 JavaScript 事 件 循 环 创建 一 个 非 阻 塞 的 服务 器 ， 可 以 很 高 效 地 处 理 
大 量 的 请 求 。 此 项 目 未 来 将 实现 非常 酷 的 功能 。 





